/** * Tutor public profile (/tutor/{slug}) * — Single combined panel: About me, How I can help, Certificates * — Section titles 25px / weight 700, Playfair Display (hero name + all profile headings); reviews + lazy skeleton aligned * Scoped with .am-tutor-profile-page (restored after revert) */ .am-tutor-profile-page .am-find-tutors-area { /* Match vertical rhythm with other profile sections (~20–24px, not 48px bottom) */ padding: 24px 0 24px; background: transparent; } /* Equal inset from viewport left/right on desktop (pairs with lg shell rules below) */ @media (min-width: 992px) { .am-tutor-profile-page { --tp-viewport-inline: clamp(1.25rem, 5vw, 3rem); padding-inline: var(--tp-viewport-inline); box-sizing: border-box; } } .am-tutor-profile-page .am-tutor-profile-banner.am-search-detail-banner { margin-top: 0 !important; padding-top: 1rem !important; } .am-tutor-profile-page .container { max-width: 72rem !important; } /* * Hero banner column: strip Bootstrap horizontal gutters so the first card’s outer width * matches `.am-userinfo_section > .container > .row > .col-12` (About me and other panels). * About applies padding on the col itself; the hero card carries equivalent inner padding. */ .am-tutor-profile-page .am-search-detail-banner .container > .row > .col-12 { /* Match Bootstrap gutter/padding used by About Me card container. */ padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important; padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_card { box-shadow: none !important; /* Allow Book / Send CTAs under first-session offer to show (theme used overflow:hidden + min-height) */ overflow: visible !important; /* Override main.css width:80% — match About me column band (max 1200px, centered) */ width: 100% !important; max-width: var(--tp-unified-card-max-w, 1200px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } @media (min-width: 48rem) { .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_card { min-height: auto !important; } } /* Hero: tutor name + brief intro */ .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; color: #000000 !important; } .am-tutor-profile-page .am-video-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0; } /* Rich text from Summernote: parent uses weight 400; restore semantic emphasis inside */ .am-tutor-profile-page .am-tutordetail_description--rich strong, .am-tutor-profile-page .am-tutordetail_description--rich b { font-weight: 700 !important; } .am-tutor-profile-page .am-tutordetail_description--rich em, .am-tutor-profile-page .am-tutordetail_description--rich i { font-style: italic !important; } .am-tutor-profile-page .am-tutordetail_description--rich u { text-decoration: underline !important; } .am-tutor-profile-page .am-userinfo_content .am-addmore strong, .am-tutor-profile-page .am-userinfo_content .am-addmore b { font-weight: 700 !important; } .am-tutor-profile-page .am-userinfo_content .am-addmore em, .am-tutor-profile-page .am-userinfo_content .am-addmore i { font-style: italic !important; } .am-tutor-profile-page .am-userinfo_content .am-addmore u { text-decoration: underline !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; justify-content: space-between !important; box-sizing: border-box !important; position: relative !important; } /* Hero card: tighten languages → social icons → bio (beats main.css margins) */ .am-tutor-profile-page .am-tutordetail_content .am-tutordetail_languages { margin-top: 8px !important; margin-bottom: 4px !important; } .am-tutor-profile-page .am-tutordetail_content .am-tutordetail-btns-social--after-languages { margin-top: 4px !important; margin-bottom: 4px !important; } .am-tutor-profile-page .am-tutordetail_content .am-tutordetail_description { margin-top: 8px !important; margin-bottom: 1rem !important; } /* Session fee amount ($ / digits from formatAmountV2): Playfair, semibold */ .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_fee strong, .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_fee strong sup, .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_fee strong sub, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong sup, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong sub { font-family: "Playfair Display", Georgia, serif !important; font-weight: 600 !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_fee strong em, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong em { font-family: "Poppins", sans-serif !important; } /* Hero session fee is sm/md only — keep flow layout (desktop fee is in sidebar) */ @media (max-width: 991.98px) { .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_fee:not(.am-tp-sidebar-session-fee) { position: static !important; top: auto !important; right: auto !important; text-align: left !important; max-width: none !important; width: 100% !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tp-hero-session-fee.am-tutordetail_fee { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } } @media (min-width: 992px) { .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tp-hero-session-fee.am-tutordetail_fee { display: none !important; } } /* First session offer: sidebar (desktop) + hero (narrow), under session fee */ @media (max-width: 991.98px) { .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-first-session-offer { display: none !important; } } /* Hero first-session copy is in .am-tp-hero-offer-and-cta (after intro brief); hidden on lg+ via .am-tp-cta--hero-only */ .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-first-session-offer { margin: 0 0 1rem 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-sidebar-first-session-offer__title { font-family: "Playfair Display", Georgia, serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 0.5rem 0 !important; line-height: 1.25 !important; } .am-tutor-profile-page .am-tp-sidebar-first-session-offer__body { font-size: 0.9375rem !important; line-height: 1.5 !important; color: #333333 !important; } .am-tutor-profile-page .am-tp-hero-first-session-offer__title { font-family: "Playfair Display", Georgia, serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 0.5rem 0 !important; line-height: 1.25 !important; } .am-tutor-profile-page .am-tp-hero-first-session-offer__body { font-size: 0.9375rem !important; line-height: 1.5 !important; color: #000 !important; } /* Native language chip — match find-coaches (.am-fc-tutor-root) */ .am-tutor-profile-page .am-tutordetail_languages .wa-tags-list-inline .wa-tag-native { background: #fff8dc !important; color: #493611 !important; padding: 4px 12px !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; line-height: 1.2 !important; margin: 0 8px 0 0 !important; } .am-tutor-profile-page .am-tutordetail_languages .wa-tags-list-inline .wa-tag-native em { color: #493611 !important; font-weight: 600 !important; margin-left: 4px !important; font-style: normal !important; } /* CTAs directly under “What I will offer in my first session” (desktop: sidebar; mobile: hero) */ .am-tutor-profile-page .am-tp-cta--sidebar-only { display: none !important; } @media (min-width: 992px) { .am-tutor-profile-page .am-tp-cta--sidebar-only { display: block !important; } } .am-tutor-profile-page .am-tp-cta--hero-only { display: block !important; } @media (min-width: 992px) { .am-tutor-profile-page .am-tp-cta--hero-only { display: none !important; } } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-cta-after-offer, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-cta-after-session { margin-top: 0.75rem !important; width: 100% !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-first-session-cta { margin-top: 0 !important; } .am-tutor-profile-page .am-tutordetail_head .am-tp-hero-first-session-cta, .am-tutor-profile-page .am-tp-hero-offer-and-cta .am-tp-hero-first-session-cta { margin-top: 0.75rem !important; margin-bottom: 0.25rem !important; width: 100% !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-hero-offer-and-cta { width: 100% !important; box-sizing: border-box !important; } /* ----- Combined About / How I can help / Certificates (one outer card) ----- */ .am-tutor-profile-page .am-userinfo_section { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 20px !important; } /* Tighten gap between hero shell and first About / content card (same as between lower sections) */ .am-tutor-profile-page .am-find-tutors-area > .am-userinfo_section:first-of-type { margin-top: 0 !important; } .am-tutor-profile-page .am-tutor-detail { margin-top: 0 !important; } .am-tutor-profile-page .am-userinfo_section .col-12 > .am-section_title-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 32px !important; } .am-tutor-profile-page .am-userinfo_section .col-12 .am-userinfo_content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding: 0 32px !important; border: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } .am-tutor-profile-page .am-userinfo_section .am-userinfo_content { padding-left: 32px !important; padding-right: 32px !important; } .am-tutor-profile-page .am-userinfo_section .row { justify-content: center !important; } /* Only the outer profile card column (container > row > col), not nested grid cols that also use .col-12 */ .am-tutor-profile-page .am-userinfo_section > .container > .row > .col-12 { width: 100% !important; max-width: 1200px !important; flex: 0 1 auto !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; border-radius: 20px !important; box-shadow: none !important; padding: 32px !important; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap { margin-top: 0 !important; margin-bottom: 0.65rem !important; padding-left: 32px !important; padding-right: 32px !important; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap:not(:first-child) { margin-top: 0.25rem !important; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap h3 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #1a1a1a !important; margin: 0 !important; line-height: 1.25 !important; } .am-tutor-profile-page .am-userinfo_section .am-userinfo_content h3 { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; } /* Divider only between About → another text block. Avoid :not(:last-of-type) on .am-userinfo_content: the last child div is .am-certificates_in-profile-panel, so every content block matched and got a bottom border — doubling with .am-profile-certs-title’s top border. */ .am-tutor-profile-page .am-userinfo_section .col-12 > .am-userinfo_content:has(+ .am-section_title-wrap + .am-userinfo_content) { padding-bottom: 1.25rem !important; margin-bottom: 1.25rem !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; } /* Space after About / How I can help / coaching areas before Certification block */ .am-tutor-profile-page .am-userinfo_section .col-12 > .am-userinfo_content:has(+ .am-section_title-wrap.am-profile-certs-title), .am-tutor-profile-page .am-userinfo_section .col-12 > .am-coaching-areas-content:has(+ .am-section_title-wrap.am-profile-certs-title) { padding-bottom: 1.75rem !important; margin-bottom: 0.75rem !important; } /* ----- Articles on profile (#blogs): same centered full-width card band as About / certificates ----- */ .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-title { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 32px !important; margin-bottom: 1rem !important; text-align: left !important; } .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-grid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 32px !important; } .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cta { text-align: center !important; } /* Blogs CTA ("View all ... articles"): black default, orange/pink hover */ .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cta .am-btn { color: #fff !important; background: #111111 !important; background-color: #111111 !important; border-color: #111111 !important; } .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cta .am-btn:hover, .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cta .am-btn:focus { color: #fff !important; background: #111111 !important; background-color: #111111 !important; border-color: #111111 !important; filter: none !important; } /* * Blog tiles: desktop profile CSS zeros padding on .am-userinfo_section .row / .col-12 (blog cols use col-12), * which removes Bootstrap gutters — cards sit flush. Use grid + gap (same spirit as coaching-areas grid). */ .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cards-row { display: grid !important; grid-template-columns: 1fr; gap: 1.25rem; margin: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cards-row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important; } @media (min-width: 992px) { .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 2.5rem); row-gap: 0; } } @media (max-width: 991.98px) { .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-section__cards-row > [class*="col-"]:first-child:not(:only-child) { border-bottom: 1px solid rgba(15, 23, 42, 0.12); padding-bottom: 1.25rem; } } /* No white panel behind the blogs block or each tile (main.css .am-blog-items uses #fff) */ .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 { background: transparent !important; } .am-tutor-profile-page .am-userinfo_section.am-profile-blogs-section .am-blog-items { background: transparent !important; } /* Keep profile blog content box white */ .am-tutor-profile-page #blogs .am-allblogs_items_content { background-color: #ffffff !important; } /* Hard lock: blogs title + gray cards share one parent inset (32px) with no nested horizontal offsets. */ .am-tutor-profile-page #blogs > .container > .row > .am-profile-blogs-section__col { padding-left: 32px !important; padding-right: 32px !important; background: #FFF9F4 !important; box-sizing: border-box !important; } .am-tutor-profile-page #blogs .am-profile-blogs-title, .am-tutor-profile-page #blogs .am-profile-blogs-grid, .am-tutor-profile-page #blogs .am-profile-blogs-section__cards-row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .am-tutor-profile-page #blogs .am-profile-blogs-section__cards-row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* “Areas of coaching I deal with” — two columns, check + label */ .am-tutor-profile-page .am-coaching-areas-content { padding-bottom: 0.25rem !important; } .am-tutor-profile-page .am-coaching-areas-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2rem; column-gap: clamp(1.25rem, 4vw, 3rem); } @media (max-width: 576px) { .am-tutor-profile-page .am-coaching-areas-grid { grid-template-columns: 1fr; } } .am-tutor-profile-page .am-coaching-areas-item { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0; padding: 0.2rem 0; } /* Coaching check: orange gradient badge with white tick */ .am-tutor-profile-page .am-coaching-areas-check { flex-shrink: 0; width: 1.125rem; height: 1.125rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; color: #ffffff; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%); border-radius: 9999px; } .am-tutor-profile-page .am-coaching-areas-check svg { display: block; width: 0.8125rem; height: 0.8125rem; color: #ffffff; fill: none; stroke: #ffffff; } .am-tutor-profile-page .am-coaching-areas-label { font-size: 17px; line-height: 1.45; color: #1a1a1a; text-decoration: none; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap.am-profile-certs-title { margin-bottom: 1.25rem !important; } .am-tutor-profile-page .am-userinfo_section .am-profile-certs-title:not(:first-child) { margin-top: 0 !important; padding-top: 1.75rem !important; border-top: 1px solid rgba(15, 23, 42, 0.08) !important; } /* Strip nested certificate “mini card” inside combined panel (beats global .am-certificates_content) */ .am-tutor-profile-page .am-userinfo_section .am-certificates_in-profile-panel .am-certificates_content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .am-tutor-profile-page .am-userinfo_section .am-certificates_in-profile-panel { margin-top: 0.25rem !important; padding: 32px !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-userinfo_section .am-certificates_in-profile-panel .am-certificates_grid { width: 100% !important; } .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .toggle-description { margin-top: 0.375rem !important; display: inline-block !important; } @media (max-width: 768px) { .am-tutor-profile-page .am-userinfo_section > .container > .row > .col-12 { width: 100% !important; max-width: 100% !important; padding: 1.5rem !important; border-radius: 20px !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap h3 { font-size: 25px !important; line-height: 1.2 !important; } } .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .short-description, .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .full-description, .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .am-toggle-text p { font-size: 17px !important; line-height: 1.6 !important; color: #1a1a1a !important; margin: 0 !important; } .am-tutor-profile-page .select2-container textarea.select2-search__field, .am-tutor-profile-page .am-booking_section textarea.select2-search__field { font: normal 400 0.875rem/1.4285714286em "Poppins", sans-serif !important; } /* ----- Booking (availability) ----- */ .am-tutor-profile-page .am-tutor-detail .am-booking_section { margin-top: 0 !important; margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section#availability { margin-top: 0 !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section .am-booksession-title h3 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.25 !important; } .am-tutor-profile-page .am-userinfo_content .am-booksession-title--aligned { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.75rem 1rem !important; justify-content: flex-start !important; } .am-tutor-profile-page .am-booksession-title--aligned > h3 { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; margin: 0 !important; flex: 0 0 auto; } .am-tutor-profile-page .am-booksession-title__spacer { flex: 1 1 auto !important; min-width: 0.75rem !important; height: 1px !important; align-self: center !important; } .am-tutor-profile-page .am-booksession-title--aligned > .am-btn { flex: 0 0 auto !important; margin: 0 !important; align-self: center !important; } /* Book a session — black (hero/sidebar CTA to #availability; not .am-booksession-title “Request a session”) */ .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn { color: #fff !important; background: #000 !important; background-color: #000 !important; border-color: #000 !important; } .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:focus, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:focus { color: #fff !important; background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #1a1a1a !important; } .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:hover:before, .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:focus:before, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:hover:before, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:focus:before { background-color: #fff; } .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn > i:before, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn > i:before { color: #fff !important; } /* Availability grid: “Book session” per slot */ .am-tutor-profile-page .am-booking_section .am-bookingbtns .am-booksession { color: #fff !important; background: #000 !important; background-color: #000 !important; border: 1px solid #000 !important; } .am-tutor-profile-page .am-booking_section .am-bookingbtns .am-booksession:hover, .am-tutor-profile-page .am-booking_section .am-bookingbtns .am-booksession:focus { color: #fff !important; background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #1a1a1a !important; } .am-tutor-profile-page .am-howtobook--inline { position: relative !important; right: auto !important; bottom: auto !important; z-index: 20; flex: 0 0 auto; align-self: center !important; } .am-tutor-profile-page .am-howtobook--inline > a { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 8px !important; background: #295c51 !important; } .am-tutor-profile-page .am-howtobook--inline .am-howtobook_popup { top: 100% !important; bottom: auto !important; left: 0 !important; right: auto !important; margin-top: 8px !important; margin-bottom: 0 !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section .am-userinfo_content { margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; } /* Book-a-session week strip: prev/next inside the white card + green chevrons */ .am-tutor-profile-page .am-tutor-detail #weeklytab.tab-pane { position: relative !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow, .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow { top: 16px !important; transform: none !important; margin: 0 !important; width: 36px !important; height: 36px !important; z-index: 3 !important; background: rgba(6, 90, 70, 0.1) !important; border-radius: 10px !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow { left: -10px !important; right: auto !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow { right: -10px !important; left: auto !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow i::before, .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow i::before { color: #065a46 !important; font-size: 14px !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow[disabled] { background: rgba(88, 88, 88, 0.08) !important; pointer-events: none !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow[disabled] i::before { color: rgba(6, 90, 70, 0.35) !important; } .am-tutor-profile-page .am-tutor-detail #weeklytab > .am-booksession-details { padding-left: 60px !important; padding-right: 60px !important; } .am-tutor-profile-page .am-tutor-detail #weeklytab .am-mobile-date-hidden { display: none !important; } @media (max-width: 576px) { .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow, .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow { top: 16px !important; transform: none !important; width: 36px !important; height: 36px !important; background: rgba(6, 90, 70, 0.1) !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow { left: -8px !important; right: auto !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow { right: -8px !important; left: auto !important; } .am-tutor-profile-page .am-tutor-detail #weeklytab > .am-booksession-details { padding-left: 56px !important; padding-right: 56px !important; } } /* Calendly: match platform “Book a session” card — iframe must not be clipped; needs explicit height */ .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-booking__inner.am-userinfo_content { overflow: visible !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-booksession-title--calendly { margin: 0 0 1.25rem 0 !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-booksession-title--calendly h3 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.25 !important; margin: 0 !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-embed { position: relative; width: 100%; min-height: 650px; } .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-iframe { display: block; width: 100% !important; min-height: 650px; height: 700px; max-width: 100%; border: 0 !important; border-radius: 12px; background: #fff; } @media (max-width: 576px) { .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-embed { min-height: 600px; } .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-iframe { min-height: 600px; height: 620px; } } .am-tutor-profile-page .am-booking_section.am-featured-courses h1 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #1a1a1a !important; } .am-tutor-profile-page .am-similar-tutor .am-userinfomore_title h3 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.25 !important; } .am-tutor-profile-page .am-similar-card-name h3, .am-tutor-profile-page .am-similar-card-name h3 a { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; } .am-tutor-profile-page .am-tutor-detail .am-similar-tutor { margin-top: 0 !important; margin-bottom: 0 !important; } /* ----- Reviews: loaded + lazy skeleton (white card, no gray flash) ----- */ .am-tutor-profile-page #reviews { margin-top: 0 !important; margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .am-tutor-profile-page #reviews .am-reviews_card { background: #ffffff !important; } .am-tutor-profile-page .am-tutor-detail #reviews .am-reviews_card .am-reviews_title h3 { font-family: "Playfair Display", Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.25 !important; margin: 0 !important; } .am-tutor-profile-page .am-userinfo_section .am-certificate_info h4 { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; } .am-tutor-profile-page .am-booking_section.am-featured-courses .cr-course-title, .am-tutor-profile-page .am-booking_section.am-featured-courses .cr-course-title a { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; } .am-tutor-profile-page #reviews .am-reviews-skeleton-title-bar { display: block !important; width: min(12rem, 70%) !important; max-width: 280px !important; height: 25px !important; border-radius: 8px !important; } .am-tutor-profile-page #reviews .am-reviews_section[aria-busy="true"] .am-reviews_card, .am-tutor-profile-page #reviews .am-reviews_section[aria-busy="true"] .am-reviews_wrap { background: #ffffff !important; } .am-tutor-profile-page #reviews .am-reviews_section[aria-busy="true"] .am-reviews_section_wrap { background: transparent !important; } /* ========== Tutor detail (moved from tutor-detail.blade.php) ========== */ /* ===== Tutor 5-Star Rating Display (matching courses style) ===== */ .am-tutor-stars-row { display: flex !important; align-items: center !important; gap: 6px !important; } .am-tutor-stars { display: inline-flex !important; align-items: center !important; gap: 2px !important; } .am-tutor-stars i { font-size: 16px !important; color: #D0D5DD !important; } .am-tutor-stars i:before { color: #D0D5DD !important; } .am-tutor-stars.am-tutor-5star i:before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-4star i:nth-child(-n+4):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-3star i:nth-child(-n+3):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-2star i:nth-child(-n+2):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-1star i:nth-child(-n+1):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-0star i:before { color: #D0D5DD !important; } .am-tutor-stars.am-tutor-4-5star i:nth-child(-n+4):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-3-5star i:nth-child(-n+3):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-2-5star i:nth-child(-n+2):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-1-5star i:nth-child(-n+1):before { color: #FDB022 !important; content: "\eacf" !important; } .am-tutor-stars.am-tutor-0-5star i:nth-child(1), .am-tutor-stars.am-tutor-1-5star i:nth-child(2), .am-tutor-stars.am-tutor-2-5star i:nth-child(3), .am-tutor-stars.am-tutor-3-5star i:nth-child(4), .am-tutor-stars.am-tutor-4-5star i:nth-child(5) { position: relative; } .am-tutor-stars.am-tutor-0-5star i:nth-child(1):after, .am-tutor-stars.am-tutor-1-5star i:nth-child(2):after, .am-tutor-stars.am-tutor-2-5star i:nth-child(3):after, .am-tutor-stars.am-tutor-3-5star i:nth-child(4):after, .am-tutor-stars.am-tutor-4-5star i:nth-child(5):after { content: "\eacf"; font-family: icomoon !important; color: #FDB022; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; } /* Tutor profile hero: review score pill */ .am-tutor-rating-score { font-size: 14px !important; font-weight: 600 !important; color: #5e4e26 !important; background: #f1efe7 !important; padding: 1px 8px !important; border-radius: 8px !important; } .am-tutor-review-count { font-size: 13px !important; font-weight: 400 !important; color: rgb(88, 88, 88) !important; font-style: normal !important; } /* Control spacing between major page sections */ .am-search-detail-banner { margin-bottom: 0 !important; padding-bottom: 0 !important; } .am-tutor-detail { margin: 10px 0 0 0 !important; padding: 0 !important; width: 100% !important; } /* Figma: tutor profile card 383px height, rem-based responsive, no overlap */ .am-search-userdetail { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* * Same specificity as main.css `.am-searchdetail .am-search-userdetail .am-tutordetail_card` * so this page’s first card wins (no double shadow / 32px padding / 1200px cap from theme). */ .am-searchdetail .am-search-userdetail .am-tutordetail_card { padding: 2rem !important; border-radius: 1.25rem !important; background: #ffffff !important; margin: 0 auto 1.25rem !important; display: block !important; width: 100% !important; max-width: 75rem !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; overflow: hidden !important; position: relative !important; box-sizing: border-box !important; box-shadow: none !important; } @media (min-width: 48rem) { .am-searchdetail .am-search-userdetail .am-tutordetail_card { min-height: 23.9375rem !important; /* 383px Figma - scales with root */ } } .am-searchdetail .am-search-userdetail .am-tutordetail_profile { gap: 1.5rem !important; display: flex !important; align-items: flex-start !important; width: 100% !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; position: relative !important; box-sizing: border-box !important; } /* Desktop: content column — flex + min-height 0 (line-clamp); beats main.css gap on profile */ .am-searchdetail .am-search-userdetail .am-tutordetail_content { display: flex !important; flex-direction: column !important; position: relative !important; min-height: 0 !important; flex: 1 1 auto !important; justify-content: space-between !important; box-sizing: border-box !important; width: 100% !important; } /* Desktop: Head section - relative positioning for fee */ .am-tutordetail_head { position: relative !important; width: 100% !important; margin-bottom: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* Desktop: User name section - leave space for fee on right */ .am-tutordetail_user_name { padding-right: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* * Coach name uses Playfair on find-coaches (.am-tutorsearch_user_name h3 a). * This page uses

for the name; main.css only sets .am-tutordetail_user_name h3 (Poppins), * so h1 never got that typography — restore Playfair to match listing cards. */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; font-size: 2rem !important; line-height: 1.25 !important; color: #000000 !important; margin: 0 0 0.75rem 0 !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; } /* Match find-coaches cards: main.css .am-tutorsearch_user_name h3 > span.flag */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .flag { width: 18.66px !important; height: 13px !important; flex: none !important; flex-shrink: 0 !important; border-radius: 4px !important; vertical-align: middle !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_profession_row { position: relative !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0.35rem 0.5rem !important; margin: 0.25rem 0 0.625rem 0 !important; padding: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; line-height: 1.4 !important; font-family: "Poppins", sans-serif !important; max-width: 100% !important; } /* Label hidden visually; kept for screen readers */ .am-searchdetail .am-search-userdetail .am-tutordetail_profession_label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_profession_value { color: #000000 !important; font-size: 17px !important; font-weight: 500 !important; overflow-wrap: anywhere !important; word-break: break-word !important; min-width: 0 !important; } /* Description: clamp lines so content fits in 383px card, no overlap */ @media (min-width: 48rem) { .am-tutordetail_description { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; line-height: 1.4 !important; } .am-tutordetail_description p, .am-tutordetail_description .short-description, .am-tutordetail_description .full-description { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; line-height: 1.4 !important; } } /* Session fee positioning - top right of hero card only (sidebar fee is static) */ .am-searchdetail .am-search-userdetail .am-tutordetail_fee:not(.am-tp-sidebar-session-fee) { position: absolute !important; top: 0 !important; right: 0 !important; text-align: right !important; font-size: 1rem !important; line-height: 1.5 !important; z-index: 1 !important; padding: 0 !important; margin: 0 !important; max-width: 10rem !important; white-space: normal !important; box-sizing: border-box !important; } .am-tutordetail_fee span { font-size: 1rem !important; color: #333333 !important; } /* Figma: session fee amount - $ and numbers same size ($40.00 style) */ .am-tutordetail_fee strong { font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; display: block !important; line-height: 1.2 !important; } /* formatAmountV2 outputs currency in sup, decimals in sub - override so all same size, no gap */ .am-tutordetail_fee strong sup, .am-tutordetail_fee strong sub { font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; vertical-align: baseline !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; } /* Currency symbol: keep a sliver of space so $ does not overlap digits (formatAmountV2 uses ) */ .am-tutordetail_fee strong sup { margin-right: 0.08em !important; margin-left: 0 !important; top: auto !important; left: auto !important; right: auto !important; position: static !important; } .am-tutordetail_fee em { font-size: 0.875rem !important; font-weight: 400 !important; font-style: normal !important; color: #333333 !important; } /* Book a session & Send message: no icons, text centered (match find-coaches) */ .am-tutordetail-btns-primary .am-btn, .am-tutordetail-btns-primary .am-white-btn, .am-tutordetail-btns .am-btn, .am-tutordetail-btns .am-white-btn { justify-content: center !important; text-align: center !important; } .am-tutordetail-btns-primary .am-btn i, .am-tutordetail-btns-primary .am-white-btn i, .am-tutordetail-btns .am-btn i, .am-tutordetail-btns .am-white-btn i { display: none !important; } /* Livewire CTA: Book row, then Send + heart row (layouts using .am-tutordetail-btns wrapper) */ .am-tutordetail-btns .livewire-component > a.am-btn { flex: 0 0 auto !important; display: flex !important; align-items: center !important; white-space: nowrap !important; min-width: auto !important; max-width: none !important; } .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row { flex: 0 0 auto !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; min-width: auto !important; max-width: none !important; } .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row > a.am-white-btn, .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row > a.am-likebtn { flex: 0 0 auto !important; display: flex !important; align-items: center !important; white-space: nowrap !important; min-width: auto !important; max-width: none !important; } /* Social row inside legacy .am-tutordetail-btns wrapper (single merged block) */ .am-tutordetail-btns .am-tutordetail_social[style] { flex-wrap: wrap !important; overflow: visible !important; } .am-tutordetail-btns .am-tutordetail_social { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; overflow: visible !important; flex: 0 0 auto !important; margin: 0 !important; position: relative !important; z-index: 1 !important; box-sizing: border-box !important; max-width: 100% !important; } .am-tutordetail-btns .am-tutordetail_social a { width: 3rem !important; height: 3rem !important; min-width: 3rem !important; border-radius: 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #DB84010D !important; color: #295C51 !important; text-decoration: none !important; font-weight: 600 !important; flex: 0 0 auto !important; opacity: 1 !important; visibility: visible !important; flex-shrink: 0 !important; } .am-tutordetail-btns .am-tutordetail_social a i, .am-tutordetail-btns .am-tutordetail_social a svg { font-size: 1.25rem !important; width: 1.25rem !important; height: 1.25rem !important; } .am-tutordetail-btns .am-tutordetail_social a:hover { background: #e0e0e0 !important; color: #333 !important; } /* Hide the separate desktop book session button - we use the one in livewire */ .am-book-session-btn-desktop { display: none !important; } /* All buttons from Livewire component should be inline */ .am-tutordetail-btns .livewire-component a.am-btn, .am-tutordetail-btns .livewire-component a.am-white-btn, .am-tutordetail-btns .livewire-component a.am-likebtn { display: flex !important; visibility: visible !important; opacity: 1 !important; height: auto !important; flex: 0 0 auto !important; } /* Video button can extend outside image, but other elements stay contained */ .am-tutor-image-section { overflow: visible !important; } /* Figma: profile image 192×217px → 12rem × 13.5625rem */ .am-tutorvone_img { flex: 0 0 auto !important; width: 12rem !important; min-width: 12rem !important; max-width: 12rem !important; height: 13.5625rem !important; min-height: 13.5625rem !important; max-height: 13.5625rem !important; position: relative !important; overflow: visible !important; box-sizing: border-box !important; } .am-tutorvone_img img { width: 100% !important; height: 100% !important; border-radius: 1rem !important; object-fit: cover !important; display: block !important; } /* Book a session — compact when sharing a row with Send + heart + social */ .am-tutordetail-btns-primary .am-btn { width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; white-space: nowrap !important; } /* Main buttons container — one row: CTAs left, social icons right (under photo column) */ .am-tutordetail-btns-main-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; margin-top: 1.25rem !important; width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } .am-tutordetail-btns-main-container::-webkit-scrollbar { height: 4px !important; } /* CTAs under bio paragraph (content column) — one row: Book | Send | heart */ .am-tutordetail-btns-main-container--under-bio { overflow: visible !important; margin-top: 1.25rem !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary { flex: 0 0 auto !important; width: 100% !important; overflow: visible !important; } /* Book full width, then Send + heart on the row below */ .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; box-sizing: border-box !important; } /* Pill radius matches theme / find-coaches (.am-btn uses 50px in main.css) */ .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div > a.am-btn { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; justify-content: center !important; box-sizing: border-box !important; padding: 0.625rem 0.75rem !important; font-size: 0.875rem !important; font-weight: 600 !important; white-space: nowrap !important; text-align: center !important; line-height: 1.25 !important; border-radius: 50px !important; overflow: hidden !important; } .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-white-btn { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; justify-content: center !important; box-sizing: border-box !important; padding: 0.625rem 0.75rem !important; font-size: 0.875rem !important; font-weight: 600 !important; white-space: nowrap !important; text-align: center !important; line-height: 1.25 !important; border-radius: 50px !important; overflow: hidden !important; } .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-likebtn { flex: 0 0 2.5rem !important; width: 2.5rem !important; min-width: 2.5rem !important; max-width: 2.5rem !important; height: 2.5rem !important; padding: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50px !important; overflow: hidden !important; } /* First div: Book a session, Send message, Heart icon (inline) */ .am-tutordetail-btns-primary { flex: 0 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: nowrap !important; box-sizing: border-box !important; } /* Force Livewire component wrapper to display inline */ .am-tutordetail-btns-primary > div { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; width: auto !important; } /* All buttons must be inline */ .am-tutordetail-btns-primary a.am-btn, .am-tutordetail-btns-primary a.am-white-btn, .am-tutordetail-btns-primary a.am-likebtn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; min-width: auto !important; max-width: none !important; margin: 0 !important; vertical-align: middle !important; } /* Send message — same compact row as Book */ .am-tutordetail-btns-primary a.am-white-btn, .am-tutordetail-btns a.am-white-btn { width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; background: #f7f7f8 !important; color: #585858 !important; border: 1px solid #eaeaea !important; white-space: nowrap !important; } .am-tutordetail-btns-primary a.am-white-btn i::before, .am-tutordetail-btns-primary a.am-white-btn i, .am-tutordetail-btns-primary a.am-white-btn svg, .am-tutordetail-btns a.am-white-btn i::before, .am-tutordetail-btns a.am-white-btn i, .am-tutordetail-btns a.am-white-btn svg { color: #585858 !important; fill: #585858 !important; } /* Send message button hover styles */ .am-tutordetail-btns-primary a.am-white-btn:hover, .am-tutordetail-btns a.am-white-btn:hover { color: #295C51 !important; } .am-tutordetail-btns-primary a.am-white-btn:hover i, .am-tutordetail-btns-primary a.am-white-btn:hover i::before, .am-tutordetail-btns-primary a.am-white-btn:hover svg, .am-tutordetail-btns a.am-white-btn:hover i, .am-tutordetail-btns a.am-white-btn:hover i::before, .am-tutordetail-btns a.am-white-btn:hover svg { color: #295C51 !important; fill: #295C51 !important; } /* Social icons beside CTAs (legacy); profile card uses --after-languages */ .am-tutordetail-btns-social { flex: 0 0 auto !important; min-width: 0 !important; margin-left: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; flex-wrap: nowrap !important; box-sizing: border-box !important; } /* Social row between languages and bio (first card, content column) — left aligned */ .am-tutordetail-btns-social--after-languages { width: 100% !important; margin-left: 0 !important; margin-right: auto !important; margin-top: 4px !important; margin-bottom: 4px !important; justify-content: flex-start !important; flex-wrap: wrap !important; align-items: center !important; flex: none !important; } /* Extra specificity beats .am-tutordetail-btns-social .am-tutordetail_social--hero { justify-content: flex-end } */ .am-tutordetail-btns-social.am-tutordetail-btns-social--after-languages .am-tutordetail_social.am-tutordetail_social--hero { justify-content: flex-start !important; margin-left: 0 !important; margin-right: auto !important; flex-wrap: wrap !important; overflow-x: visible !important; overflow-y: visible !important; } .am-tutordetail-btns-social .am-tutordetail_social { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; margin: 0 !important; overflow-x: auto !important; overflow-y: visible !important; max-width: 100% !important; box-sizing: border-box !important; justify-content: flex-end !important; } .am-tutordetail-btns { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.75rem !important; margin-top: 1.25rem !important; flex-wrap: nowrap !important; width: 100% !important; overflow: visible !important; } .am-tutordetail-btns > * { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } /* Ensure Livewire component buttons are inline */ .am-tutordetail-btns .livewire-component { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.75rem !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; } /* Certified Badge — warm gold gradient */ .am-certified-badge { padding: 0 !important; display: inline-block !important; } .am-certified-badge .am-certified-text { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 10px !important; background: linear-gradient(120deg, #fdf3d4 0%, #e3b84a 100%) !important; border: 1px solid rgba(160, 110, 30, 0.38) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #3d3010 !important; white-space: nowrap !important; line-height: 1.4 !important; } .am-certified-badge .am-certified-text i { font-size: 12px !important; display: inline-flex !important; align-items: center !important; color: #3d3010 !important; } .am-certified-badge .am-certified-text i::before { color: #3d3010 !important; } .am-certified-badge .am-certified-text span { color: #3d3010 !important; font-weight: 700 !important; } /* Tooltip shows "Certified" on hover */ .am-certified-badge .am-tooltip-text { visibility: hidden !important; opacity: 0 !important; } .am-certified-badge:hover .am-tooltip-text { visibility: visible !important; opacity: 1 !important; } /* Spacing between name and rating - match find tutors page */ .am-tutordetail_rating { margin-top: 0.5rem !important; } /* Rating star icon - match similar tutor card style */ .am-tutordetail_rating .am-tutorreview-item { gap: 6px !important; display: flex !important; align-items: center !important; } .am-tutordetail_rating .am-tutorreview-item_icon { width: 16px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; } .am-tutordetail_rating .am-tutorreview-item_icon i { color: #fdb022 !important; } .am-tutordetail_rating .am-tutorreview-item span { display: flex !important; align-items: center !important; color: #585858 !important; font-size: 0.875rem !important; font-weight: 500 !important; } .am-tutordetail_rating .am-tutorreview-item span em { font-weight: 400 !important; font-style: normal !important; color: rgba(88, 88, 88, 0.7) !important; } .am-tutordetail_rating .am-tutorreview-item .am-tutor-rating-score { color: #1b2430 !important; background: linear-gradient(135deg, #fdf1cc 0%, #f8dce7 100%) !important; border: 1px solid rgba(233, 183, 58, 0.45) !important; border-radius: 999px !important; padding: 2px 10px !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; } .am-tutordetail_rating .am-tutorreview-item .am-tutor-review-count { font-size: 13px !important; font-weight: 400 !important; color: rgb(88, 88, 88) !important; font-style: normal !important; } /* Desktop: Hide certified badge in rating section (after review) */ @media (min-width: 769px) { .am-tutordetail_rating .am-certified-badge-mobile, .am-tutordetail_rating span.am-certified-badge-mobile, .am-tutordetail_rating .am-certified-badge-mobile * { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } } /* .am-tutordetail_description { width: 100% !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.6 !important; color: #000000 !important; margin-top: 20px !important; margin-bottom: 0 !important; padding: 0 !important; } .am-tutordetail_description p, .am-tutordetail_description .short-description, .am-tutordetail_description .full-description { font-size: 18px !important; font-weight: 600 !important; line-height: 1.6 !important; color: #000000 !important; margin: 0 !important; } */ .wa-tag-native { background: #fff8dc !important; color: #493611 !important; padding: 4px 12px !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; line-height: 1.2 !important; margin-right: 8px !important; } .wa-tag-native em { color: #493611 !important; font-weight: 600 !important; margin-left: 4px !important; font-style: normal !important; } /* Figma: image section width 192px = 12rem */ .am-tutor-image-section { flex: 0 0 auto !important; max-width: 12rem !important; min-width: 12rem !important; width: 12rem !important; display: flex !important; flex-direction: column !important; } .am-video-btn { position: absolute !important; bottom: -0.625rem !important; left: 50% !important; transform: translateX(-50%) !important; background: #FFF8B8 !important; color: #493611 !important; border: none !important; border-radius: 9999px !important; padding: 0.5rem 1rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.2) !important; z-index: 10 !important; transition: all 0.3s ease !important; } .am-video-btn svg { color: #493611 !important; fill: #493611 !important; } .am-video-btn:hover { background: #FFF8B8 !important; color: #493611 !important; transform: translateX(-50%) scale(1.05) !important; } .am-video-btn:hover svg { color: #493611 !important; fill: #493611 !important; } /* Generic social row only when not using hero tiles (hero overrides via higher specificity) */ .am-tutordetail_social:not(.am-tutordetail_social--hero) { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.75rem !important; margin-top: 1.25rem !important; flex-wrap: wrap !important; } .am-tutordetail_social:not(.am-tutordetail_social--hero) a { width: 3rem !important; height: 3rem !important; border-radius: 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #DB84010D !important; color: #295C51 !important; text-decoration: none !important; transition: all 0.3s ease !important; } .am-tutordetail_social:not(.am-tutordetail_social--hero) a:hover { background: #e0e0e0 !important; color: #333 !important; } .am-tutordetail_social:not(.am-tutordetail_social--hero) a i, .am-tutordetail_social:not(.am-tutordetail_social--hero) a svg { font-size: 20px !important; width: 20px !important; height: 20px !important; } /* ===== MASTER RESET: strip ALL default theme spacing from section wrappers ===== */ .am-userinfo_section, .am-tutor-detail .am-booking_section, .am-tutor-detail #reviews { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Strip Bootstrap grid spacing inside ALL sections */ .am-userinfo_section .container, .am-userinfo_section .row, .am-userinfo_section .col-12, .am-tutor-detail .am-booking_section .container, .am-tutor-detail .am-booking_section .row, .am-tutor-detail .am-booking_section .col-12, .am-tutor-detail #reviews .container, .am-tutor-detail #reviews .row, .am-tutor-detail #reviews .col-12 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Desktop: all section titles - same style */ .am-section_title-wrap { width: 100% !important; max-width: 1200px !important; margin: 0 auto 16px auto !important; padding: 0 !important; } .am-section_title-wrap h3 { font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; } /* Desktop: all content cards - unified style: full width of main column (max 1200px), 20px bottom gap */ .am-userinfo_section .am-userinfo_content { padding: 32px !important; border-radius: 20px !important; background: #ffffff !important; margin: 0 auto 20px auto !important; display: block !important; width: 100% !important; max-width: 1200px !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; overflow: hidden !important; } .am-userinfo_content h3 { font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 20px !important; margin-top: 0 !important; } .am-userinfo_content .am-toggle-text, .am-userinfo_content .am-addmore, .am-userinfo_content .short-description, .am-userinfo_content .full-description { font-size: 17px !important; line-height: 1.6 !important; color: #1a1a1a !important; } .am-userinfo_content .am-toggle-text p, .am-userinfo_content .am-addmore p, .am-userinfo_content .short-description p, .am-userinfo_content .full-description p { font-size: 17px !important; line-height: 1.6 !important; color: #1a1a1a !important; margin: 0 !important; } /* ===== Consistent width & gap for ALL sections ===== */ /* Book a Session: inner content uses same width/max-width as all other cards */ .am-tutor-detail .am-booking_section .am-userinfo_section { width: 100% !important; margin: 0 !important; padding: 0 !important; } .am-tutor-detail .am-booking_section .am-userinfo_content { width: 100% !important; max-width: 1200px !important; margin: 0 auto 20px auto !important; padding: 32px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; overflow: hidden !important; display: block !important; } /* Weekly booking: keep mobile week strip out of desktop flow (invalid in div caused overlap) */ @media (min-width: 992px) { .am-tutor-detail .am-booking-weekly-clander.am-booking-mobile { display: none !important; } .am-tutor-detail #weeklytab > .am-booksession-details { flex: 1 1 0% !important; min-width: 0 !important; max-width: 100% !important; } } /* Featured courses: strip intermediate spacing */ .am-tutor-detail .am-booking_section.am-featured-courses .container, .am-tutor-detail .am-booking_section.am-featured-courses .container > .row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .am-booking_section{ margin-top: 2.5rem !important; } .am-tutor-detail .am-booking_section.am-featured-courses .container > .row > .col-12 { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; } /* ===== Uniform card bottom margin (20px gap between ALL cards) ===== */ .am-certificates_content { width: 100% !important; max-width: 1200px !important; margin: 0 auto 20px auto !important; padding: 32px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; overflow: hidden !important; display: block !important; } .am-tutor-detail #reviews .am-reviews_card .am-reviews_title { margin: 0 0 20px 0 !important; padding: 0 !important; } /* Student Reviews: strip ALL intermediate spacing */ .am-tutor-detail #reviews .am-reviews_section, .am-tutor-detail #reviews .am-reviews_section .container, .am-tutor-detail #reviews .am-reviews_section .row, .am-tutor-detail #reviews .am-reviews_section .col-12 { background: transparent !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; } .am-tutor-detail #reviews .am-reviews_section_wrap { width: 100% !important; max-width: 1200px !important; /* Same 20px gap as .am-userinfo_content / booking cards (reset on #reviews zeros outer margin) */ margin: 0 auto 20px auto !important; padding: 0 !important; } .am-tutor-detail #reviews .am-reviews_section_wrap:after { display: none !important; } /* main.css .am-similar-tutor:after — same #f5e2c8 line at top of Similar Tutors (reads as “under” reviews card) */ .am-tutor-detail .am-similar-tutor:after { display: none !important; content: none !important; } .am-tutor-detail #reviews .am-reviews_card .am-reviews_title h3 { font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; line-height: 1.25 !important; } .am-tutor-detail #reviews .am-reviews_wrap { padding: 0 !important; margin: 0 !important; } /* Reviews card: white panel like Book a session / About */ .am-tutor-detail #reviews .am-reviews_card { width: 100% !important; background: #ffffff !important; border-radius: 20px !important; box-shadow: none !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; padding: 32px !important; overflow: hidden !important; } /* No inner white panel: no-reviews content uses same card background */ .am-tutor-detail #reviews .am-reviews_card .am-norecord { background: transparent !important; box-shadow: none !important; border: none !important; } .am-tutor-detail #reviews .am-reviews_card .am-norecord_content { background: transparent !important; } .am-tutor-detail #reviews .am-reviews_card .am-comments_list { margin: 0 !important; padding: 0 !important; } .am-tutor-detail #reviews .am-reviews_card .am-comments_list li:first-child { padding-top: 0 !important; } .am-tutor-detail #reviews .am-reviews_card .am-pagination { margin-bottom: 0 !important; } /* Review body text (main.css .am-comment p is 0.875rem) */ .am-tutor-detail #reviews .am-reviews_card .am-comment .am-addmore, .am-tutor-detail #reviews .am-reviews_card .am-comment .am-addmore p, .am-tutor-detail #reviews .am-reviews_card .am-comment .full-description, .am-tutor-detail #reviews .am-reviews_card .am-comment .short-description { font-size: 15px !important; line-height: 1.6 !important; color: #333333 !important; } .am-tutor-detail #reviews .am-reviews_card .am-comment .am-addmore .toggle-description, .am-tutor-detail #reviews .am-reviews_card .am-comment p .toggle-description { font-size: 15px !important; line-height: 1.6 !important; } .am-tutor-detail #reviews .am-reviews_card .am-comment_rate span strong { font-weight: 600 !important; color: #000000 !important; font-style: normal !important; } .am-certificates_content { margin-left: auto !important; margin-right: auto !important; display: block !important; width: 100% !important; max-width: 1200px !important; padding: 32px !important; background: #ffffff !important; box-shadow: none !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; border-radius: 20px !important; overflow: hidden !important; box-sizing: border-box !important; } .am-certificates_grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; width: 100% !important; } .am-certificate_card { display: flex !important; flex-direction: column !important; padding: 32px !important; background: #f9f9f9 !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; box-shadow: none !important; gap: 0 !important; } .am-certificate_card_top { display: flex !important; flex-direction: row !important; gap: 16px !important; align-items: flex-start !important; } .am-certificate_img_wrapper { flex: 0 0 auto !important; width: 80px !important; min-width: 80px !important; max-width: 80px !important; height: 80px !important; } .am-certificate_img { margin: 0 !important; width: 100% !important; height: 100% !important; border-radius: 10px !important; overflow: hidden !important; } .am-certificate_img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 10px !important; } .am-certificate_info { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; } .am-certificate_info h4 { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; line-height: 1.4 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .am-certificate_info ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .am-certificate_info ul li { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: #666 !important; margin: 0 !important; } .am-certificate_info ul li i { font-size: 13px !important; color: #999 !important; flex-shrink: 0 !important; } .am-certificate_description { font-size: 13px !important; line-height: 1.5 !important; color: #666 !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid #f0f0f0 !important; word-break: break-word !important; } .am-certificate_description .toggle-description { color: #DB8401 !important; text-decoration: none !important; font-weight: 500 !important; font-size: 13px !important; margin-left: 2px !important; } .am-certificate_description .toggle-description:hover { text-decoration: underline !important; } .am-certificate_info h4 { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; line-height: 1.4 !important; } .am-certificate_info ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .am-certificate_info ul li { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; color: #666 !important; margin: 0 !important; } .am-certificate_info ul li i { font-size: 14px !important; color: #666 !important; } .am-certificate_description { font-size: 14px !important; line-height: 1.5 !important; color: #666 !important; margin-top: 8px !important; } @media (max-width: 768px) { .am-userinfo_content { width: 100% !important; max-width: 100% !important; } .am-certificates_grid { grid-template-columns: 1fr !important; gap: 20px !important; } .am-certificates_content { width: 100% !important; padding: 16px !important; } .am-certificate_img_wrapper { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; } /* Mobile responsive styles for tutor detail to match Figma design */ .am-tutordetail_card { width: 100% !important; max-width: 100% !important; padding: 1rem !important; margin: 0 auto 1.25rem !important; } .am-tutordetail_profile { flex-direction: column !important; gap: 0 !important; align-items: center !important; } .am-tutor-image-section { width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 auto 1.75rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .am-tutorvone_img_wrapper { width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 auto !important; } /* Mobile: profile image responsive - 20rem × 17.5rem (320×280 equivalent) */ .am-tutor-image-section .am-tutorvone_img { width: 20rem !important; max-width: 20rem !important; min-width: 20rem !important; height: 17.5rem !important; min-height: 17.5rem !important; max-height: 17.5rem !important; margin: 0 auto !important; position: relative !important; padding-bottom: 0 !important; overflow: visible !important; display: block !important; align-self: center !important; flex: 0 0 20rem !important; } .am-tutor-image-section .am-tutorvone_img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 1rem !important; } /* Mobile: Ensure all buttons from Livewire component are visible */ .am-tutordetail-btns .livewire-component a.am-btn, .am-tutordetail-btns .livewire-component a.am-white-btn, .am-tutordetail-btns .livewire-component a.am-likebtn { display: flex !important; } /* Mobile: Hide desktop wrapper structure if any */ .am-tutorvone_img_wrapper { display: contents !important; } .am-tutorvone_img img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 1rem !important; } .am-video-btn { position: absolute !important; bottom: -1rem !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important; white-space: nowrap !important; } .am-video-btn:hover { transform: translateX(-50%) scale(1.05) !important; } .am-tutordetail_content { width: 100% !important; display: flex !important; flex-direction: column !important; min-height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; } /* Mobile: Reset order for all children, then apply specific orders */ .am-tutordetail_content > * { order: 0 !important; } /* Mobile: Head (name, rating, fee) - order 1 */ .am-tutordetail_content > .am-tutordetail_head { order: 1 !important; } /* Mobile: Languages - order 3 (after head) */ .am-tutordetail_content > .am-tutordetail_languages { order: 3 !important; } /* Mobile: Social under languages - order 4 */ .am-tutordetail_content > .am-tutordetail-btns-social--after-languages { order: 4 !important; margin-top: 6px !important; margin-bottom: 6px !important; } /* Mobile: Description - order 5 */ .am-tutordetail_content > .am-tutordetail_description { order: 5 !important; } /* Mobile: First-session offer + hero CTAs after intro brief - order 6 */ .am-tutordetail_content > .am-tp-hero-offer-and-cta { order: 6 !important; width: 100% !important; box-sizing: border-box !important; } /* Mobile: Content order - head, languages, social, description, CTAs */ .am-tutordetail_head { order: 1 !important; display: flex !important; } /* Mobile: Name first (natural order) */ .am-tutordetail_user_name { order: 0 !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { order: 0 !important; } /* Mobile: Name only (first line) */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { margin-bottom: 0 !important; } /* Mobile: Reviews and Certified (second line) - decreased margin after */ .am-tutordetail_rating { order: 1 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 0 !important; margin-bottom: 2px !important; } /* Mobile: Hide certified badge in h3 - we use mobile version next to rating */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .am-certified-badge { display: none !important; } /* Mobile: fee block order (static layout applied below) */ .am-tutordetail_head > .am-tutordetail_fee { order: 2 !important; } .am-tutordetail_tagline { display: none !important; } /* Mobile: Languages section (fourth line) - must come before description, decreased margins */ .am-tutordetail_languages { order: 3 !important; margin-top: 6px !important; margin-bottom: 4px !important; } /* Mobile: Ensure languages comes before description in content */ .am-tutordetail_content .am-tutordetail_languages { order: 3 !important; } /* Mobile: "I can speak" text on its own line, then break before languages */ .am-tutordetail_languages { display: flex !important; flex-direction: column !important; } /* Mobile: Make am-tutorskills-item use flexbox column - icon/text on first line, languages below */ .am-tutordetail_languages .am-tutorskills-item { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; margin-bottom: 4px !important; width: 100% !important; } /* Mobile: Icon and "I can speak" text stay inline on first line */ .am-tutordetail_languages .am-tutorskills-item > i, .am-tutordetail_languages .am-tutorskills-item > span { display: inline !important; flex-shrink: 0 !important; } /* Mobile: Languages list takes full width and appears on next line */ .am-tutordetail_languages .am-tutorskills-item .wa-tags-list, .am-tutordetail_languages .am-tutorskills-item .wa-tags-list-inline { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; flex-basis: 100% !important; margin-top: 6px !important; } /* Mobile: Description (after social row) */ .am-tutordetail_description { order: 5 !important; margin-top: 8px !important; margin-bottom: 20px !important; } .am-tutordetail_content .am-tutordetail_description { order: 5 !important; } .am-tutordetail_user_name { margin-bottom: 8px !important; } /* Mobile: hero coach name only — full path so other .am-tutordetail_user_name blocks never get Playfair */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { font-family: "Playfair Display", Georgia, serif !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 8px !important; line-height: 1.3 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .flag { width: 18.66px !important; height: 13px !important; flex: none !important; border-radius: 4px !important; } /* Mobile: Hide certified badge in h3 */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .am-certified-badge { display: none !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_profession_row { padding-right: 0 !important; margin: 0 0 6px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } /* Mobile: Rating row only (certified badge moved to profession row) */ .am-tutordetail_rating { margin-top: 0 !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; width: 100% !important; } .am-tutordetail_rating .am-tutor-stars-row { margin-top: 4px !important; } /* Mobile: Show certified badge beside profession value */ .am-searchdetail .am-search-userdetail .am-tutordetail_profession_row .am-certified-badge-mobile { display: inline-flex !important; margin-left: 0 !important; visibility: visible !important; opacity: 1 !important; } /* Desktop: Hide mobile certified badge after review */ @media (min-width: 769px) { /* Desktop: Hide the entire span wrapper and everything inside it in rating section */ .am-tutordetail_rating span.am-certified-badge-mobile { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } .am-searchdetail .am-search-userdetail .am-tutordetail_profession_row .am-certified-badge-mobile, .am-searchdetail .am-search-userdetail .am-tutordetail_profession_row .am-certified-badge-mobile * { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } /* Desktop: Hide ALL certified badges in rating section (after review) - comprehensive selectors */ .am-tutordetail_rating .am-certified-badge-mobile, .am-tutordetail_rating > .am-certified-badge-mobile, .am-tutordetail_rating .am-certified-badge-mobile *, .am-tutordetail_rating .am-certified-badge-mobile .am-certified-badge, .am-tutordetail_rating .am-certified-badge-mobile .am-custom-tooltip, .am-tutordetail_rating .am-certified-badge, .am-tutordetail_rating > .am-certified-badge, .am-tutordetail_rating .am-custom-tooltip.am-certified-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Desktop: Show certified badge after flag in hero h1 only */ .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .am-certified-badge, .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 .am-custom-tooltip.am-certified-badge { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } } .am-tutordetail_fee { position: static !important; font-size: 16px !important; display: block !important; width: 100% !important; text-align: left !important; } /* Mobile: Session fee on one line */ .am-tutordetail_fee span, .am-tutordetail_fee strong, .am-tutordetail_fee em { display: inline !important; white-space: nowrap !important; } .am-tutordetail_user_name { width: 100% !important; padding-right: 0 !important; } .am-tutordetail_fee span { font-size: 16px !important; color: #333333 !important; } .am-tutordetail_fee strong { font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; } .am-tutordetail_fee em { font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; color: #333333 !important; } .am-tutordetail_description { margin-top: 8px !important; margin-bottom: 20px !important; overflow: visible !important; max-height: none !important; } .am-tutordetail_description, .am-tutordetail_description p, .am-tutordetail_description .short-description, .am-tutordetail_description .full-description { overflow: visible !important; max-height: none !important; height: auto !important; } .am-tutordetail_tagline { margin-top: 12px !important; margin-bottom: 12px !important; } .am-tutordetail_languages { margin-top: 8px !important; margin-bottom: 8px !important; } .am-tutordetail_languages .am-tutorskills-item { margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 6px !important; } .am-tutordetail_languages .am-tutorskills-item i { font-size: 16px !important; color: #666666 !important; } .am-tutordetail_languages .am-tutorskills-item span { font-size: 16px !important; font-weight: 500 !important; color: #333333 !important; } .am-tutordetail_languages .wa-tags-list { margin-top: 8px !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; } /* Mobile: CTAs under bio — Book full width, then Send + heart */ .am-tutordetail-btns-main-container--under-bio { margin-top: 24px !important; width: 100% !important; } .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div { gap: 8px !important; } .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div > a.am-btn { padding: 12px 12px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 50px !important; overflow: hidden !important; } .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-white-btn { flex: 1 1 0 !important; padding: 12px 12px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 50px !important; overflow: hidden !important; background: #f0f0f2 !important; border: 1px solid #e0e0e2 !important; color: #333 !important; } .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-likebtn { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; flex-basis: 40px !important; border: 1px solid #eaeaea !important; border-radius: 50px !important; overflow: hidden !important; } /* Mobile: Second div - social icons in a row */ .am-tutordetail-btns-social, .am-tutordetail-btns-social-mobile { width: 100% !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .am-tutordetail-btns-social::-webkit-scrollbar, .am-tutordetail-btns-social-mobile::-webkit-scrollbar { display: none !important; } .am-tutordetail-btns-social .am-tutordetail_social, .am-tutordetail-btns-social-mobile .am-tutordetail_social { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; max-width: 100% !important; } .am-tutordetail-btns { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-top: 20px !important; width: 100% !important; } .am-tutordetail-btns > * { width: 100% !important; } /* Style the livewire component wrapper — Book full width, then Send + heart row */ .am-tutordetail-btns > .livewire-component { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row { display: grid !important; grid-template-columns: 1fr 40px !important; gap: 12px !important; width: 100% !important; } /* Book a session button - full width, first row */ .am-tutordetail-btns .livewire-component > a.am-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; min-width: auto !important; max-width: none !important; } .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row > a.am-white-btn:not(.am-likebtn) { grid-column: 1 / span 1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; min-width: auto !important; max-width: none !important; background: #f0f0f2 !important; border: 1px solid #e0e0e2 !important; color: #333 !important; } /* Heart/like button - fixed width, on same row as Send */ .am-tutordetail-btns .livewire-component .am-tutor-cta-secondary-row > a.am-likebtn { grid-column: 2 / span 1 !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; min-width: 40px !important; max-width: 40px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* Social media icons section - after description on mobile, in single row */ .am-tutordetail-btns { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; display: flex !important; flex-wrap: nowrap !important; } /* Reorder content elements on mobile */ .am-tutordetail_content { display: flex !important; flex-direction: column !important; } .am-tutordetail_description { order: 1 !important; } .am-tutordetail-btns { order: 2 !important; } /* Move social links out of inline flow on mobile - show after description in single row */ .am-tutordetail-btns .am-tutordetail_social { order: 2 !important; flex-wrap: nowrap !important; margin-top: 16px !important; margin-bottom: 16px !important; gap: 8px !important; width: 100% !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .am-tutordetail-btns .am-tutordetail_social::-webkit-scrollbar { display: none !important; } .am-tutordetail-btns .am-tutordetail_social a { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; flex-shrink: 0 !important; } .am-tutordetail-btns .am-tutordetail_social a i, .am-tutordetail-btns .am-tutordetail_social a svg { font-size: 20px !important; width: 20px !important; height: 20px !important; } .am-tutordetail-btns .livewire-component { order: 3 !important; width: 100% !important; grid-template-columns: 1fr 40px !important; display: grid !important; } /* Mobile: All section titles — full width (same band as desktop) */ .am-section_title-wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto 12px auto !important; } /* Mobile: All content cards — full width, 16px gap */ .am-userinfo_section .am-userinfo_content { width: 100% !important; max-width: 100% !important; padding: 1rem !important; box-sizing: border-box !important; margin: 0 auto 16px auto !important; } .am-certificates_content { width: 100% !important; max-width: 100% !important; padding: 16px !important; box-sizing: border-box !important; margin: 0 auto 16px auto !important; } .am-tutor-detail .am-booking_section .am-userinfo_content { width: 100% !important; max-width: 100% !important; padding: 1rem !important; box-sizing: border-box !important; margin: 0 auto 16px auto !important; } .am-tutor-detail #reviews .am-reviews_section_wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto 16px auto !important; } .am-tutor-detail .am-booking_section.am-featured-courses .container > .row > .col-12 { width: 100% !important; max-width: 100% !important; } /* Breadcrumb adjustments */ .am-breadcrumb { font-size: 14px !important; margin-bottom: 16px !important; } /* Spacing adjustments */ .am-searchdetail { margin-top: 20px !important; } .am-tutor-detail #reviews .am-reviews_card { padding: 16px !important; } /* Mobile: Featured courses section - same width */ .am-tutor-detail .am-booking_section.am-featured-courses .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .am-tutor-detail .am-booking_section.am-featured-courses .container > .row { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* ===== Similar Tutors - Unified Card Layout (desktop + mobile) ===== */ /* Grid: 2 columns on desktop */ .am-similaruser-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Each card */ .am-similar-card { padding: 1.25rem !important; border-radius: 1.25rem !important; background: #ffffff !important; border: 1px solid rgba(219, 132, 1, 0.08) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; transition: box-shadow 0.2s ease !important; } .am-similar-card:hover { box-shadow: 0px 4px 12px -2px rgba(16, 24, 40, 0.1), 0px 2px 6px -2px rgba(16, 24, 40, 0.06) !important; } /* Card image */ .am-similar-card-img-link { display: block !important; text-decoration: none !important; } .am-similar-card-img { width: 100% !important; height: 12rem !important; border-radius: 0.75rem !important; overflow: hidden !important; margin: 0 0 1rem 0 !important; padding: 0 !important; } .am-similar-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0.75rem !important; display: block !important; } /* Card content */ .am-similar-card-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 auto !important; } /* Name + Flag */ .am-similar-card-name { width: 100% !important; margin-bottom: 4px !important; } .am-similar-card-name h3 { font-size: 1.125rem !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; line-height: 1.4 !important; } .am-similar-card-name h3 a { color: #1a1a1a !important; text-decoration: none !important; font-weight: 700 !important; } .am-similar-card-name h3 a:hover { color: #295C51 !important; } /* Rating + Certified */ .am-similar-card-rating { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; width: 100% !important; } .am-similar-card-rating .am-tutorreview-item { gap: 6px !important; display: flex !important; align-items: center !important; } .am-similar-card-rating .am-tutorreview-item_icon { width: 16px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; } .am-similar-card-rating .am-tutorreview-item_icon i { color: #fdb022 !important; } .am-similar-card-rating .am-tutorreview-item span { display: flex !important; align-items: center !important; color: #585858 !important; font-size: 0.875rem !important; font-weight: 500 !important; } .am-similar-card-rating .am-tutorreview-item span em { font-weight: 400 !important; font-style: normal !important; color: rgba(88, 88, 88, 0.7) !important; } .am-similar-card-rating .am-tutorreview-item .am-tutor-review-count { font-size: 13px !important; font-weight: 400 !important; color: rgb(88, 88, 88) !important; font-style: normal !important; } .am-similar-card-certified .am-certified-text, .am-similar-card-certified .am-custom-tooltip .am-certified-text { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 8px !important; background: linear-gradient(120deg, #fdf3d4 0%, #e3b84a 100%) !important; border: 1px solid rgba(160, 110, 30, 0.38) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; color: #3d3010 !important; white-space: nowrap !important; } .am-similar-card-certified .am-certified-text i, .am-similar-card-certified .am-certified-text span { color: #3d3010 !important; } .am-similar-card-certified .am-certified-text i::before { color: #3d3010 !important; } /* Session fee - clean inline display */ .am-similar-card-fee { display: flex !important; align-items: baseline !important; flex-wrap: nowrap !important; gap: 6px !important; margin-bottom: 8px !important; width: 100% !important; } .am-similar-card-fee > span { font-size: 0.9375rem !important; color: #333333 !important; white-space: nowrap !important; } .am-similar-card-fee strong.am-similar-card-price { font-size: 1.5rem !important; font-weight: 700 !important; color: #000000 !important; display: inline !important; line-height: 1.2 !important; } .am-similar-card-fee strong.am-similar-card-price sup, .am-similar-card-fee strong.am-similar-card-price sub { font-size: 1.5rem !important; font-weight: 700 !important; color: #000000 !important; vertical-align: baseline !important; line-height: inherit !important; top: 0 !important; bottom: 0 !important; position: relative !important; } .am-similar-card-fee > em { font-size: 0.875rem !important; font-weight: 400 !important; font-style: normal !important; color: #585858 !important; white-space: nowrap !important; } /* Languages */ .am-similar-card-languages { margin-bottom: 8px !important; width: 100% !important; } .am-similar-card-languages .am-tutorskills-item { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .am-similar-card-languages .am-tutorskills-item > i { font-size: 16px !important; color: #666666 !important; } .am-similar-card-languages .am-tutorskills-item > span { font-size: 0.9375rem !important; font-weight: 500 !important; color: #333333 !important; } .am-similar-card-languages .wa-tags-list-inline { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; flex-basis: 100% !important; margin-top: 8px !important; } .am-similar-card-languages .wa-tag-native { background: #fff8dc !important; color: #493611 !important; padding: 4px 12px !important; border-radius: 16px !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; line-height: 1.2 !important; } .am-similar-card-languages .wa-tag-native em { color: #493611 !important; font-weight: 600 !important; margin-left: 4px !important; font-style: normal !important; } .am-similar-card-languages .wa-tag-language { background: #f3f4f6 !important; color: #374151 !important; padding: 4px 12px !important; border-radius: 16px !important; font-size: 13px !important; font-weight: 500 !important; display: inline-block !important; } /* Description */ .am-similar-card-description { margin-bottom: 16px !important; width: 100% !important; flex: 1 1 auto !important; } .am-similar-card-description p { font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.5 !important; color: #333333 !important; margin: 0 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } /* Buttons */ .am-similar-card-btns { width: 100% !important; margin-top: auto !important; } .am-similar-card-btns > div { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .am-similar-card-btns .am-tutor-cta-secondary-row { display: grid !important; grid-template-columns: 1fr 40px !important; gap: 10px !important; width: 100% !important; } .am-similar-card-btns a.am-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px 16px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; } .am-similar-card-btns .am-tutor-cta-secondary-row a.am-white-btn { grid-column: 1 / span 1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px 16px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; background: #f7f7f8 !important; border: 1px solid #eaeaea !important; color: #585858 !important; } .am-similar-card-btns .am-tutor-cta-secondary-row a.am-white-btn:hover { color: #295C51 !important; } .am-similar-card-btns .am-tutor-cta-secondary-row a.am-likebtn { grid-column: 2 / span 1 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: 1px solid #eaeaea !important; border-radius: 8px !important; } .am-similar-card-btns a.am-btn i, .am-similar-card-btns a.am-white-btn i { display: none !important; } /* Similar tutors section title */ .am-similar-tutor .am-userinfomore_title { width: 100% !important; max-width: 1200px !important; margin: 0 auto 16px auto !important; } .am-similar-tutor .am-userinfomore_title h3 { font-size: 25px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* Grid container width */ .am-similar-tutor .am-similaruser-grid { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; } /* View all tutors button */ .am-similar-tutor .am-similaruser-btn { width: 100% !important; max-width: 1200px !important; margin: 20px auto 0 auto !important; text-align: center !important; } /* ===== Similar Tutors - Mobile Overrides ===== */ @media (max-width: 768px) { .am-similaruser-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .am-similar-tutor .am-userinfomore_title { width: 100% !important; margin: 0 auto 12px auto !important; } .am-similar-tutor .am-userinfomore_title h3 { font-size: 25px !important; } .am-similar-tutor .am-similaruser-grid { width: 100% !important; max-width: 100% !important; } .am-similar-card { padding: 1rem !important; } .am-similar-card-img { height: 14rem !important; border-radius: 1rem !important; } .am-similar-card-img img { border-radius: 1rem !important; } .am-similar-card-name h3 { font-size: 1.25rem !important; } .am-similar-card-btns a.am-btn { padding: 12px 16px !important; font-size: 16px !important; } .am-similar-card-btns a.am-white-btn { padding: 12px 16px !important; font-size: 16px !important; background: #f0f0f2 !important; border: 1px solid #e0e0e2 !important; color: #333 !important; } .am-similar-tutor .am-similaruser-btn { width: 100% !important; margin: 16px auto 0 auto !important; } } /* Brand-colour social tiles (white glyphs on network colours) — desktop hero + mobile row */ .am-tutordetail_social.am-tutordetail_social--hero { flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; margin-left: auto !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; } .am-tutordetail_social.am-tutordetail_social--hero::-webkit-scrollbar { display: none !important; } .am-tutordetail-btns-social .am-tutordetail_social.am-tutordetail_social--hero, .am-tutordetail-btns-social-mobile .am-tutordetail_social.am-tutordetail_social--hero { justify-content: flex-end !important; flex-wrap: nowrap !important; } .am-tutordetail-btns-social .am-tutordetail_social.am-tutordetail_social--hero { margin-left: 0 !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero { box-sizing: border-box !important; width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 30px !important; border-radius: 6px !important; border: none !important; color: #ffffff !important; text-decoration: none !important; font-weight: 600 !important; font-size: 11px !important; line-height: 1 !important; transition: filter 0.15s ease, transform 0.15s ease !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero:hover { filter: brightness(1.08) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero svg, .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero path { fill: currentColor !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; color: #ffffff !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="Website"] { background: #295c51 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="Facebook"] { background: #1877f2 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="X/Twitter"] { background: #000000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="LinkedIn"] { background: #0a66c2 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="Instagram"] { background: linear-gradient( 45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100% ) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="Pinterest"] { background: #e60023 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="YouTube"] { background: #ff0000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important; } .am-tutordetail_social.am-tutordetail_social--hero a.am-social-link--hero[title="TikTok"] { background: #000000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important; } /* ========== Tutor profile — mobile polish (narrow viewports, safe areas) ========== */ @media (max-width: 767.98px) { .am-tutor-profile-page { overflow-x: clip; --tp-card-padding: 1.5rem; /* Extra inset from screen edges (Bootstrap container gutter stays intact) */ padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); box-sizing: border-box; } /* Slightly wider gutter so columns align with the same visual margin as hero cards */ .am-tutor-profile-page .container { --bs-gutter-x: 2rem; max-width: 100% !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_card { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: var(--tp-card-padding) !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tutordetail_head { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; } .am-tutor-profile-page .am-tutordetail_fee { margin-top: 0 !important; white-space: normal !important; } .am-tutor-profile-page .am-tutordetail_fee strong { margin-left: 0 !important; } .am-tutor-profile-page .am-tutor-image-section .am-tutorvone_img { position: relative !important; width: min(20rem, calc(100vw - 2rem)) !important; max-width: min(20rem, calc(100vw - 2rem)) !important; min-width: 0 !important; height: auto !important; aspect-ratio: 192 / 217 !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; } .am-tutor-profile-page .am-tutor-image-section .am-tutorvone_img img { width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; object-fit: cover !important; } .am-tutor-profile-page .am-userinfo_section > .container > .row > .col-12 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* One width for every major panel (full width of main column; overrides older narrow theme blocks) */ .am-tutor-profile-page .am-section_title-wrap, .am-tutor-profile-page .am-userinfo_section .am-userinfo_content, .am-tutor-profile-page .am-certificates_content, .am-tutor-profile-page .am-tutor-detail .am-booking_section .am-userinfo_content, .am-tutor-profile-page .am-tutor-detail .am-booking_section.am-featured-courses .container > .row > .col-12, .am-tutor-profile-page .am-tutor-detail .am-booking_section.am-featured-courses .container > .row, .am-tutor-profile-page .am-tutor-detail #reviews .am-reviews_section_wrap, .am-tutor-profile-page .am-similar-tutor .am-userinfomore_title, .am-tutor-profile-page .am-similar-tutor .am-similaruser-grid, .am-tutor-profile-page .am-similar-tutor .am-similaruser-btn { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tutor-detail #reviews .am-reviews_card { padding: var(--tp-card-padding) !important; } .am-tutor-profile-page .am-tutor-detail .am-booking_section .am-userinfo_content { padding: var(--tp-card-padding) !important; } /* Mobile edge alignment: hero + booking should not be narrower than peer blocks. */ .am-tutor-profile-page { padding-left: 0 !important; padding-right: 0 !important; } .am-tutor-profile-page .am-search-detail-banner .container, .am-tutor-profile-page .am-userinfo_section > .container, .am-tutor-profile-page .am-tutor-detail .am-booking_section > .container, .am-tutor-profile-page .am-tutor-detail #reviews .am-reviews_section > .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .am-tutor-profile-page .am-search-detail-banner .container > .row > .col-12, .am-tutor-profile-page .am-userinfo_section > .container > .row > .col-12, .am-tutor-profile-page .am-tutor-detail .am-booking_section > .container > .row > .col-12, .am-tutor-profile-page .am-tutor-detail #reviews .am-reviews_section > .container > .row > .col-12 { padding-left: 0 !important; padding-right: 0 !important; } .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div { flex-wrap: nowrap !important; gap: 0.5rem !important; } .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div > a.am-btn { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; } .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-white-btn { flex: 1 1 0 !important; min-width: 0 !important; } .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-likebtn { flex: 0 0 2.5rem !important; } } @media (max-width: 380px) { .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { font-size: 1.375rem !important; } } /* ---- Tutor profile: sidebar right; main column max 72rem ---- */ .am-tutor-profile-page .am-tp-profile-body-shell { --tp-sidebar-brand: #295c51; --tp-sidebar-brand-hover: #1f4a41; --tp-main-column-max: 72rem; --tp-sidebar-w: 21rem; /* Space between main column and sidebar */ --tp-sidebar-gap: 20px; /* Main column cards (hero, sections, booking, reviews): one band; max 1200px. Sidebar width is separate. */ --tp-hero-card-width: min(100%, 1200px); --tp-hero-card-max-w: 1200px; /* Mirrors main.css `.am-searchdetail { margin-top: 40px }` — hero card sits below banner padding + this */ --tp-hero-searchdetail-offset: 40px; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail.am-tp-hero-userdetail { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center; } /* Mobile fix: keep hero tutor image natural (no odd stretch/crop). */ @media (max-width: 767.98px) { .am-tutor-profile-page .am-tutor-detail #weeklytab .am-booking-weekly-clander thead tr th:nth-child(n+4), .am-tutor-profile-page .am-tutor-detail #weeklytab .am-booking-weekly-clander tbody tr td:nth-child(n+4) { display: none !important; } .am-tutor-profile-page .am-tutor-detail #weeklytab .am-booking-weekly-clander thead tr th:nth-child(-n+3), .am-tutor-profile-page .am-tutor-detail #weeklytab .am-booking-weekly-clander tbody tr td:nth-child(-n+3) { width: 33.3333% !important; } .am-tutor-profile-page .am-tutor-image-section .am-tutorvone_img { width: min(18.5rem, calc(100vw - 2rem)) !important; max-width: min(18.5rem, calc(100vw - 2rem)) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; } .am-tutor-profile-page .am-tutor-image-section .am-tutorvone_img img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-height: 70vh !important; object-fit: contain !important; } } @media (min-width: 992px) { /* * row-reverse: aside first in DOM sits on the right; main column on the left. * Main uses flex-grow: 0 so it does not stretch beside the hero card band. * justify-content: center keeps [main | gap | sidebar] grouped and centered when the shell is wider. */ .am-tutor-profile-page .am-tp-profile-body-shell { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: var(--tp-sidebar-gap); width: 100%; max-width: calc(var(--tp-main-column-max) + var(--tp-sidebar-w) + var(--tp-sidebar-gap)); margin-inline: auto; /* Viewport gutters come from .am-tutor-profile-page padding-inline */ padding-inline: 0; box-sizing: border-box; } /* Center hero + panels in the main column (whole shell is already centered in the viewport) */ .am-tutor-profile-page .am-tp-profile-main-column .am-searchdetail .am-search-userdetail.am-tp-hero-userdetail { justify-content: center !important; } /* Single source of truth: change this once to resize all main cards. */ .am-tutor-profile-page .am-tp-profile-main-column { --tp-unified-card-max-w: var(--tp-hero-card-max-w); --tp-main-card-width: min(100%, var(--tp-unified-card-max-w)); --tp-main-card-max-w: var(--tp-unified-card-max-w); } /* Outer width envelope shared by all primary body blocks. */ .am-tutor-profile-page .am-tp-profile-main-column .am-search-detail-banner > .container > .row > .col-12, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section > .container > .row > .col-12, .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section .container > .row > .col-12, .am-tutor-profile-page .am-tp-profile-main-column #reviews .am-reviews_section > .container > .row > .col-12, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 { width: var(--tp-main-card-width) !important; max-width: var(--tp-main-card-max-w) !important; flex: 0 1 auto !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; } /* Keep the hero card itself on the same width contract. */ .am-tutor-profile-page .am-tp-profile-main-column .am-searchdetail .am-search-userdetail .am-tutordetail_card { width: var(--tp-main-card-width) !important; max-width: var(--tp-main-card-max-w) !important; margin-left: auto !important; margin-right: auto !important; /* Align with section gaps elsewhere on this page (~20px, not 40px) */ margin-bottom: 1.25rem !important; } /* Inner cards should fill the unified outer envelope. */ .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section .am-userinfo_content, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section .am-certificates_content, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section .am-profile-blogs-grid, .am-tutor-profile-page .am-tp-profile-main-column #reviews .am-reviews_section_wrap { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Keep blog cards inset like other sections (don't stretch gray tiles edge-to-edge). */ .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 { padding-left: var(--tp-card-padding, 32px) !important; padding-right: var(--tp-card-padding, 32px) !important; box-sizing: border-box !important; } /* Title and gray cards align to the exact same x-start/x-end from the same parent inset. */ .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 > .am-profile-blogs-title, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 > .am-profile-blogs-grid { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 > .am-profile-blogs-grid > .am-profile-blogs-section__cards-row, .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 > .am-profile-blogs-grid > .am-profile-blogs-section__cards-row > [class*="col-"], .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section.am-profile-blogs-section > .container > .row > .col-12 > .am-profile-blogs-grid .am-blog-items { margin-left: 0 !important; margin-right: 0 !important; } /* Keep booking content rhythm consistent with other cards. */ .am-tutor-profile-page .am-tutor-detail #weeklytab > .am-booksession-details { padding-left: var(--tp-card-padding, 32px) !important; padding-right: var(--tp-card-padding, 32px) !important; } /* Mobile/tablet: keep week nav arrows from overlapping day/date labels. */ .am-tutor-profile-page .am-tutor-detail .tab-pane_leftarrow { left: 8px !important; } .am-tutor-profile-page .am-tutor-detail .tab-pane_rightarrow { right: 8px !important; } .am-tutor-profile-page .am-tutor-detail #weeklytab > .am-booksession-details { padding-left: 56px !important; padding-right: 56px !important; } .am-tutor-profile-page .am-tp-profile-body-shell .am-tp-sidebar-sheet { flex: 0 0 var(--tp-sidebar-w); width: var(--tp-sidebar-w); max-width: var(--tp-sidebar-w); position: sticky; top: 1rem; align-self: flex-start; transform: none !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; /* Banner padding-top + .am-searchdetail margin-top (main.css) so sidebar card tops align with hero card */ padding: calc(1rem + var(--tp-hero-searchdetail-offset, 40px)) 0 0; overflow: visible; background: transparent !important; box-shadow: none !important; z-index: auto; } .am-tutor-profile-page .am-tp-profile-main-column { flex: 0 1 var(--tp-main-column-max); min-width: 0; max-width: var(--tp-main-column-max); padding-left: 0; padding-right: 0; } .am-tutor-profile-page .am-tp-sheet-head, .am-tutor-profile-page .am-tp-sheet-footer { display: none !important; } /* Below-fold: centered to match hero */ .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section > .container > .row, .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section > .container > .row, .am-tutor-profile-page .am-tp-profile-main-column #reviews .am-reviews_section > .container > .row { justify-content: center !important; } .am-tutor-profile-page .am-tp-profile-main-column .am-userinfo_section > .container > .row > .col-12 { margin-left: auto !important; margin-right: auto !important; } /* Fill col-12; centered under hero */ .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section .am-userinfo_section, .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section .am-booking-skeleton { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section .am-userinfo_content, .am-tutor-profile-page .am-tp-profile-main-column .am-tutor-detail .am-booking_section .am-calendly-booking__inner { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .am-tutor-profile-page .am-tp-profile-main-column #reviews .am-reviews_section_wrap { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } } .am-tutor-profile-page .am-tp-sidebar-inner.am-searchfilter_wrap { padding: 0.75rem; background: #faf8f5; border: 1px solid rgba(55, 48, 40, 0.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } /* Session fee: sidebar (desktop) vs hero (narrow) — explicit display beats Bootstrap/main.css conflicts */ @media (min-width: 992px) { .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } } @media (max-width: 991.98px) { .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee { display: none !important; } } /* Session fee lives in sidebar on lg+; hero uses .am-searchdetail fee rules only for sm/md */ .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee { position: static !important; top: auto !important; right: auto !important; text-align: left !important; max-width: none !important; width: 100% !important; margin: 0 0 1rem 0 !important; padding: 0 !important; z-index: auto !important; font-size: 1rem !important; line-height: 1.5 !important; box-sizing: border-box !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong { display: block !important; font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; line-height: 1.2 !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong sup, .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong sub { font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; vertical-align: baseline !important; line-height: inherit !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee strong sup { margin-right: 0.08em !important; position: static !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee span { font-size: 1rem !important; color: #333333 !important; } .am-tutor-profile-page .am-tp-sidebar-inner .am-tp-sidebar-session-fee.am-tutordetail_fee em { font-size: 0.875rem !important; font-weight: 400 !important; font-style: normal !important; color: #333333 !important; } .am-tutor-profile-page .am-tp-filters-panel { background: #fff; border: 1px solid rgba(55, 48, 40, 0.08); border-radius: 14px; padding: 1rem; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05); min-height: 5rem; } body.am-tp-sidebar-no-scroll { overflow: hidden; touch-action: none; } @media (max-width: 991.98px) { .am-tutor-profile-page .am-tp-fc-filters-scrim { position: fixed; inset: 0; z-index: 1070; background: rgba(15, 23, 42, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; pointer-events: none; } .am-tutor-profile-page .am-tp-fc-filters-scrim.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .am-tutor-profile-page .am-tp-sidebar-sheet { position: fixed; top: 0; left: auto; right: 0; bottom: 0; width: min(100%, 420px); max-width: 100vw; z-index: 1080; margin: 0 !important; padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fcfcfc; box-shadow: -8px 0 48px rgba(15, 23, 42, 0.18); transform: translate3d(105%, 0, 0); transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; } .am-tutor-profile-page .am-tp-sidebar-sheet.is-open { transform: translate3d(0, 0, 0); } .am-tutor-profile-page .am-tp-sidebar-inner.am-searchfilter_wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 1rem 1rem !important; } .am-tutor-profile-page .am-tp-filters-panel { flex: 0 0 auto; border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); } .am-tutor-profile-page .am-tp-sheet-head { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.125rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.96); position: sticky; top: 0; z-index: 3; flex: 0 0 auto; } .am-tutor-profile-page .am-tp-sheet-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; font-weight: 600; color: #000; letter-spacing: -0.02em; } .am-tutor-profile-page .am-tp-sheet-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: none; border-radius: 12px; background: rgba(0, 0, 0, 0.06); color: #000; cursor: pointer; transition: background 0.15s ease; } .am-tutor-profile-page .am-tp-sheet-close:hover { background: rgba(0, 0, 0, 0.1); } .am-tutor-profile-page .am-tp-sheet-footer { position: sticky; bottom: 0; padding: 1rem; margin: 0 -1rem -1rem; background: linear-gradient(180deg, transparent, #fcfcfc 28%, #fcfcfc 100%); border-top: 1px solid rgba(15, 23, 42, 0.06); flex: 0 0 auto; } .am-tutor-profile-page .am-tp-view-results-btn { width: 100%; border: none; border-radius: 14px; padding: 0.875rem 1.125rem; font-weight: 600; font-size: 0.9375rem; background: var(--tp-sidebar-brand); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(41, 92, 81, 0.28); transition: background 0.15s ease, transform 0.15s ease; } .am-tutor-profile-page .am-tp-view-results-btn:hover { background: var(--tp-sidebar-brand-hover); } .am-tutor-profile-page .am-tp-view-results-btn:active { transform: scale(0.99); } .am-tutor-profile-page .am-tp-mobile-toolbar { position: sticky; top: 0; z-index: 30; margin: 0 0 1rem; padding: 0.25rem 0 0.5rem; background: linear-gradient(180deg, #fcfcfc 0%, rgba(252, 252, 252, 0.94) 70%, transparent 100%); } .am-tutor-profile-page .am-tp-open-sidebar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.1); background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); font-weight: 600; font-size: 0.9375rem; color: #000; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .am-tutor-profile-page .am-tp-open-sidebar-btn:hover { border-color: rgba(41, 92, 81, 0.35); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } .am-tutor-profile-page .am-tp-open-sidebar-btn i { font-size: 1.125rem; color: var(--tp-sidebar-brand); } .am-tutor-profile-page .am-tp-profile-body-shell { padding-left: calc(var(--bs-gutter-x, 0.75rem) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--bs-gutter-x, 0.75rem) + env(safe-area-inset-right, 0px)); } } @media (prefers-reduced-motion: reduce) { .am-tutor-profile-page .am-tp-sidebar-sheet { transition: transform 0.01ms; } } /* -------------------------------------------------------------------------- Tutor profile — homepage-inspired color palette (color-only, no layout changes) -------------------------------------------------------------------------- */ body:has(.am-tutor-profile-page) .am-header_two.am-header_eight { background: #FFFDFB !important; } .am-main:has(> .am-tutor-profile-page) { background: #FFFDFB !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_card, .am-tutor-profile-page .am-userinfo_section > .container > .row > .col-12, .am-tutor-profile-page #reviews .am-reviews_card, .am-tutor-profile-page .am-tutor-detail .am-booking_section--calendly .am-calendly-iframe { background: #fff !important; border: 1px solid rgba(17, 17, 17, 0.09) !important; } .am-tutor-profile-page .am-userinfo_section .am-section_title-wrap h3, .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_user_name h1 { color: #1f2a33 !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_description, .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_description p, .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .short-description, .am-tutor-profile-page .am-userinfo_section .am-userinfo_content .full-description { color: #000 !important; } .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns-primary > div > a.am-btn:focus, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns .livewire-component > a.am-btn:focus, .am-tutor-profile-page .am-booking_section .am-bookingbtns .am-booksession:hover, .am-tutor-profile-page .am-booking_section .am-bookingbtns .am-booksession:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } /* Hero CTA row under bio — match About Us hover behavior (solid black) */ .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutordetail-btns-primary > div > a.am-btn:focus, .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-white-btn:hover, .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio .am-tutor-cta-secondary-row > a.am-white-btn:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } /* Availability section CTA — force homepage orange gradient over inline styles */ .am-tutor-profile-page .am-booksession-title--aligned > .am-btn { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #eba0b7 100%) !important; border-color: #e9b73a !important; } .am-tutor-profile-page .am-booksession-title--aligned > .am-btn:hover, .am-tutor-profile-page .am-booksession-title--aligned > .am-btn:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } /* Sidebar CTA under bio (Book a session): normal gradient, hover/focus black */ .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio.am-tp-sidebar-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn { color: #111 !important; background: linear-gradient(135deg, #f3c93c 0%, #eba0b7 100%) !important; border-color: transparent !important; } .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio.am-tp-sidebar-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:hover, .am-tutor-profile-page .am-tutordetail-btns-main-container--under-bio.am-tp-sidebar-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:focus { color: #fff !important; background: #111 !important; border-color: #111 !important; } /* Hero mobile CTA under bio (Book a session): orange/pink, hover/focus black */ @media (max-width: 991.98px) { .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn, .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:link, .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:visited { color: #111 !important; background: linear-gradient(135deg, #f3c93c 0%, #eba0b7 100%) !important; background-color: transparent !important; border-color: transparent !important; border-radius: 999px !important; } .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:hover, .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:focus, .am-tutor-profile-page .am-tp-cta--hero-only .am-tp-hero-first-session-cta .am-tutordetail-btns-primary > div > a.am-btn:active { color: #fff !important; background: #111 !important; background-color: #111 !important; border-color: #111 !important; filter: none; } } /* Weekly slots actions — rounded orange gradient buttons */ .am-tutor-profile-page #availability .am-bookingbtns .am-booksession, .am-tutor-profile-page #availability .am-bookingbtns .am-viewdetail { border-radius: 999px !important; color: #1f2a33 !important; background: #fff !important; border: 1px solid #e2e2e2 !important; } .am-tutor-profile-page #availability .am-bookingbtns .am-booksession { color: #fff !important; background: #000 !important; border-color: #000 !important; } .am-tutor-profile-page #availability .am-bookingbtns .am-booksession:hover, .am-tutor-profile-page #availability .am-bookingbtns .am-booksession:focus, .am-tutor-profile-page #availability .am-bookingbtns .am-viewdetail:hover, .am-tutor-profile-page #availability .am-bookingbtns .am-viewdetail:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } .am-tutor-profile-page #availability .am-view_schedule.am-showmore:hover, .am-tutor-profile-page #availability .am-view_schedule.am-showmore:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } .am-tutor-profile-page #availability .am-view_schedule-wrap .am-white-btn.am-view_schedule { color: #1f2a33 !important; background: #fff !important; border: 1px solid #e2e2e2 !important; } .am-tutor-profile-page #availability .am-view_schedule-wrap .am-white-btn.am-view_schedule:hover, .am-tutor-profile-page #availability .am-view_schedule-wrap .am-white-btn.am-view_schedule:focus { color: #1f2a33 !important; background: linear-gradient(135deg, #f3c93c 0%, #e79ab3 100%) !important; border-color: #e9b73a !important; } /* Hero bio (rich / truncated) — former inline styles; wins over gray token block below */ .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_description--rich { width: 100% !important; padding: 0 !important; font-weight: 400 !important; font-size: 17px !important; line-height: 1.6 !important; color: #000 !important; } .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_description--rich .short-description, .am-tutor-profile-page .am-searchdetail .am-search-userdetail .am-tutordetail_description--rich .full-description { font-weight: 400 !important; font-size: 17px !important; line-height: 1.6 !important; color: #000 !important; margin: 0 !important; } /* Intro video modal (markup injected from tutor-detail page script) */ .am-tutor-video-modal .am-tutor-video-modal__dialog { max-width: 90% !important; } .am-tutor-video-modal .am-tutor-video-modal__content { background: #000 !important; border: none !important; border-radius: 8px !important; overflow: hidden !important; } .am-tutor-video-modal .am-tutor-video-modal__header { border: none !important; padding: 10px 15px !important; position: absolute !important; top: 0 !important; right: 0 !important; z-index: 1000 !important; } .am-tutor-video-modal .am-tutor-video-modal__close { filter: invert(1) !important; opacity: 1 !important; } .am-tutor-video-modal .am-tutor-video-modal__body { padding: 0 !important; position: relative !important; } .am-tutor-video-modal .am-tutor-video-modal__ratio { position: relative !important; padding-bottom: 56.25% !important; height: 0 !important; overflow: hidden !important; } .am-tutor-video-modal .am-tutor-video-modal__ratio .video-js, .am-tutor-video-modal .am-tutor-video-modal__video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }