/* --- search.php responsive & animations --- */ .responsive { width: 100%; height: auto; } @media only screen and (max-width: 400px) { .desktop { display: none; } } @media only screen and (min-width: 401px) { .mobile { display: none; } } @keyframes anime { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- search.php discount badge --- */ /* --- DISCOUNT BADGE CSS STARTS HERE --- */ .profile-image-wrapper { /* position: relative; */ display: inline-block; margin-bottom: 15px; } .discount-badge { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%); color: white; padding: 6px 16px; border-radius: 50px; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 2rem; font-weight: 700; box-shadow: 0 4px 8px rgba(255, 94, 98, 0.3); border: 3px solid #fff; z-index: 10; } .badge-text { line-height: 1; padding-top: 2px; } .badge-icon { width: 14px; height: 14px; fill: white; } /* --- search.php figma mockup --- */ /* FIGMA MOCKUP REPLICATION FOR SEARCH PAGES */ @media (max-width: 899px) { /* 1. Hide the custom pink banner completely when at the top of the page. It will ONLY visually mount when the IntersectionObserver explicitly assigns it .goDown! */ .container.searchResults .headerDynamic:not(.goDown) { display: none !important; } /* 2. When the custom banner activates (.goDown), cleanly force it solidly over the default sticky header with absolute strict override priorities on size and layer properties. */ .container.searchResults .headerDynamic.goDown { display: flex !important; align-items: center !important; justify-content: space-between !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: 60px !important; box-sizing: border-box !important; visibility: visible !important; opacity: 1 !important; z-index: 999999 !important; /* Enforces strict overlap above the blue standard header */ padding: 0 15px !important; transform: translateY(0) !important; } .container.searchResults .wrapTopContent { padding-top: 0 !important; } /* Base Styling for the hero search pill */ .searchBySubjectPartMobile { display: flex; flex-direction: column; gap: 10px; margin: 15px; background: white; padding: 5px; border-radius: 15px; /* Less rounded on mobile stack */ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); position: relative; z-index: 85; } .searchBySubjectPartMobile>.fieldCol { flex: 1; } .searchBySubjectPartMobile>.fieldCol input { border: 1px solid #eee !important; background: white !important; width: 100% !important; padding: 15px 25px !important; outline: none !important; font-size: 1.6rem !important; border-radius: 50px !important; } } /* CRITICAL MOBILE WIDTH FIX: Enforce strict viewport boundaries, overriding legacy negative margins that cause horizontal bloom */ @media screen and (max-width: 899px) { /* Hard-lock all structural wrappers to exactly 100% of screen, center them perfectly horizontally */ html, body, .main, #searchTeachersForm, .container.searchResults, .container.searchResults .content, .container.searchResults .content .wrapMiddleContent, .wrapTopContent { width: 100% !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Flatten all recursive padding layers from grid containers to ensure a single flush padding gap */ .container.searchResults, .searchResultsRow, .searchResultsRow>.col-md-9, .searchResultsRow>.col-sm-12, .searchResultsRow>.col-xs-12, #searchres, .container.searchResults .content, .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .wrapSliderAd, .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .teacherResult, body div.wrapAdTeachers, body div#searchres .sliderPopular.goodtoknow .wrapSliderAd .wrapGrey { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* Master layout gap for all central content on Mobile */ .container.searchResults .content .wrapMiddleContent { padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; /* Block native drift */ margin-right: 0 !important; /* Block native offset bleed */ } .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .teacherResult { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } /* Safely bound the extreme width expanders (e.g. paginations, sliders) */ .paginationClass, .rightLeftButtons, .wrapSliderAd, .sliderPopular, .wrapGrey { max-width: 100vw !important; } } /* ---------------------------------------------------- GLOBAL COMPONENT REFINEMENTS (Mobile & Desktop Parity) ---------------------------------------------------- */ /* Parity request: SEO text block matches blue bubble design on ALL views */ .container.searchResults .content .wrapMiddleContent .txtSeo { background: #dde8ff !important; color: #548cff !important; font-size: 16px !important; font-weight: 700 !important; padding: 2.7rem 2.3rem !important; margin-top: 3rem !important; margin-bottom: 3rem !important; border-radius: 3rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: center !important; line-height: 1.6 !important; } /* ---------------------------------------------------- DESKTOP RESPONSIVE REFINEMENTS FOR SEARCH RESULTS ---------------------------------------------------- */ @media (min-width: 900px) { /* Limit SEO text block from spanning ultrawide monitors */ .container.searchResults .content .wrapMiddleContent .txtSeo { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } /* Limit the height of the hero background image to viewport but contained cleanly */ .container.searchResults .content .wrapTopContent .wrapImageTop, .container.searchResults .content .wrapTopContent .wrapVideoTop { width: 100vw !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: 0 !important; top: 0 !important; height: 400px !important; /* Reduced strictly to user request */ position: absolute !important; } .container.searchResults .wrapImageTop { height: 400px !important; /* Matches video */ width: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; margin-top: 0 !important; z-index: 1 !important; } .container.searchResults .content .wrapTopContent { height: 400px !important; /* Height of visible video */ min-height: 0 !important; /* Negate the 650px global lock out completely */ padding-bottom: 25px !important; /* Forces flexbox to elevate items up, balancing visual center against the wave */ box-sizing: border-box !important; justify-content: center !important; align-items: center !important; display: flex !important; flex-direction: column !important; position: relative; gap: 25px !important; /* Even exact gap between title and pill */ z-index: 10 !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName { position: relative !important; width: 100% !important; text-align: center !important; z-index: 10; margin: 0 !important; /* Handled by flex gap now */ } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 { justify-content: center !important; align-items: center !important; background: transparent !important; text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6); display: flex !important; flex-direction: column !important; margin: 0 !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span { color: white !important; text-align: center !important; display: block !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.mediumText { font-size: 2.2rem !important; font-weight: 500 !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.hugeTitle { font-size: 5rem !important; font-weight: 800 !important; margin: 5px 0 !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.subTitle { font-size: 2.0rem !important; font-weight: 500 !important; margin-top: 2px !important; } /* Keep the search fields grouped and centered properly simulating the homepage desktop pill */ .searchBySubjectPartMobile { width: 750px !important; margin: 0 auto 0 auto !important; /* Managed natively by flex container now */ position: relative !important; z-index: 85 !important; background: white; border-radius: 50px; box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15); display: flex !important; flex-direction: row !important; align-items: stretch !important; /* Stretch columns vertically to fill pill */ padding: 6px !important; } .searchBySubjectPartMobile>.fieldCol { flex: 1; display: flex !important; justify-content: center !important; align-items: stretch !important; /* Let inputs stretch cleanly inside */ } .searchBySubjectPartMobile>.fieldCol input { border: none !important; background: white !important; width: 100% !important; height: 100% !important; /* Inherits stretched height correctly avoiding dead clicking spots */ padding: 0 25px !important; outline: none !important; font-size: 1.6rem !important; border-radius: 0 !important; /* Remove inner curve restricting hitbox */ cursor: text !important; min-height: 48px !important; } .searchBySubjectPartMobile>.fieldCol.location input { border-top-left-radius: 50px !important; border-bottom-left-radius: 50px !important; } /* Divider and Right Edge Curve */ .searchBySubjectPartMobile>.fieldCol.category { border-right: none !important; border-left: 1px solid #e0e0e0 !important; /* Draws divider directly BETWEEN fields in RTL geometry */ } .searchBySubjectPartMobile>.fieldCol.category input { border-top-right-radius: 50px !important; border-bottom-right-radius: 50px !important; } /* Simulate Search Button */ .searchBySubjectPartMobile .submitSearchWrapper { display: flex !important; align-items: center !important; justify-content: center !important; padding-left: 6px; } .searchBySubjectPartMobile .submitSearchWrapper button { background: #548CFF !important; border: none !important; width: 120px !important; height: 48px !important; border-radius: 50px !important; color: white !important; font-size: 1.6rem !important; font-weight: bold !important; cursor: pointer !important; box-shadow: 0px 4px 10px rgba(84, 140, 255, 0.3) !important; transition: transform 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; } .searchBySubjectPartMobile .submitSearchWrapper button:hover { transform: scale(1.05) !important; } /* Center "Online / Frontal" Switch */ .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline { justify-content: center !important; display: flex !important; width: 100%; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch { width: 400px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-radius: 50px; display: flex !important; flex-direction: row !important; overflow: hidden !important; background: white; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch>div { flex: 1 !important; display: flex !important; justify-content: center !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch button { width: 100% !important; border: none !important; background: transparent !important; padding: 15px !important; font-size: 1.6rem !important; cursor: pointer; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch .current { background: #e6d2ff !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch .current button h4, .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline .switch .current button .switchBtnText { color: #9747ff !important; } /* Ensure the global viewport aligns seamlessly with the mobile white paradigm and STOPS horizontal sliding */ html, body, .main { background-color: #ffffff !important; max-width: 100vw !important; overflow-x: hidden !important; } .main { width: 100% !important; } /* Remove width limits for the primary search container and filter blocks extending across the entire page */ .container.searchResults, .container.searchResults .content, .container.searchResults .content .wrapMiddleContent, .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers { background-color: transparent !important; max-width: 100% !important; /* Stretch container STRICTLY edge-to-edge full width */ width: 100% !important; } .container.searchResults { background-color: #ffffff !important; padding-left: 0 !important; padding-right: 0 !important; } /* Inject the native max-width 600px mobile overrides directly onto desktop to identically replicate card styling */ #searchres>.teacherResult .wrapGrey { background: #f6f6f6 !important; /* Native mobile grey inner card backfill */ border-radius: 35px !important; /* Smooth uniform card edges mirroring mobile */ position: relative !important; overflow: visible !important; margin-top: 115px !important; /* Clear the erupting avatar safely */ padding: 3.5rem 15px 15px 15px !important; /* Mobile compression padding bringing content tight around graphics */ border: 0px solid #f2f2f2 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; height: 100% !important; /* Secure the card inside its grid constraints securely */ display: flex !important; flex-direction: column !important; } /* Let native height and transforms erupt the avatar naturally */ #searchres>.teacherResult .wrapGrey .teacherDetails { margin-bottom: 0 !important; /* Native spacing below */ } #searchres>.teacherResult .wrapGrey .teacherDetails .profileImg { transform: translateY(-16.25rem) !important; } #searchres>.teacherResult .wrapGrey .teacherDescrip { margin-top: -6.5rem !important; } /* Clean text layout and aggressively replicate color and line spacing from Mobile */ #searchres>.teacherResult .wrapGrey .teacherDescrip h3.teacherNAme { color: #000 !important; margin: 0 !important; /* Dock to 0 natively */ line-height: 1 !important; } #searchres>.teacherResult .wrapGrey .teacherDescrip h3.teacherNAme a { color: inherit !important; text-decoration: none !important; } #searchres>.teacherResult .wrapGrey .teacherDescrip h3.teacherNAme a:hover { text-decoration: none !important; } #searchres>.teacherResult .wrapGrey .profileImg a.image { display: block; text-decoration: none; } #searchres>.teacherResult .wrapGrey .teacherDescrip .teacherSub { color: #555 !important; margin: 5px 0 0 0 !important; } /* Crush the massive legacy padding causing "too much gaps between the lines" */ #searchres>.teacherResult .wrapGrey .teacherDescrip h4.descWide, #searchres>.teacherResult .wrapGrey .teacherDescrip div.descWide, #searchres>.teacherResult .wrapGrey .teacherDescrip .descWide { color: #000 !important; padding-top: 10px !important; padding-bottom: 20px !important; line-height: 1.4 !important; font-size: 1.65rem !important; /* Slight desktop compression */ } /* Native Layout Reset matching organic Mobile contrast layers directly into desktop grid */ .container.searchResults .sliderPopular.goodtoknow { margin-top: 0 !important; /* Retract the 4rem native desktop gap */ } .container.searchResults .content .wrapMiddleContent { background-color: transparent !important; /* Organic mobile grey contrast layer moved to body */ margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 60px !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .carousel.sliderChooseGrade .slider { justify-content: center !important; flex-wrap: wrap !important; height: auto !important; overflow: visible !important; gap: 15px !important; display: flex !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .carousel.sliderChooseGrade .slider .slide button { padding: 10px 20px !important; border-radius: 50px !important; border: 1px solid #ddd !important; background: white !important; cursor: pointer !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .carousel.sliderChooseGrade .slider .slide.current button { background: #e6d2ff !important; color: #9747ff !important; border-color: #e6d2ff !important; } /* Extend the search content row bound intrinsically capped at 1200px via legacy inline styling */ .row.searchResultsRow.desktopRowAlign { max-width: 100% !important; } /* Grid layout for teacher cards */ #searchres { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(max(320px, calc(33.333% - 20px)), 1fr)) !important; /* Scale dynamically across the newly un-limited desktop width */ column-gap: 30px !important; /* Spacing strictly between items sides natively requested */ row-gap: 0 !important; /* Zero top/bottom spacing natively requested */ max-width: 100% !important; margin: 0 !important; padding-bottom: 60px !important; align-items: start !important; } #searchres>div, #searchres>center { /* Everything defaults to full width if not a teacher result (e.g. banners) */ grid-column: 1 / -1 !important; } #searchres>.teacherResult { /* Teacher result gets 1 column */ grid-column: auto !important; margin-top: 0 !important; /* Retract the 13rem massive gap on Desktop */ margin-left: 0 !important; margin-right: 0 !important; } /* Bridge Mobile Pagination Design tightly into Desktop Viewport */ .container.searchResults .content .wrapMiddleContent .paginationClass { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 0.6rem; margin: 20px auto 40px auto; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons { display: flex; flex-direction: row; gap: 0.6rem; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons>button, .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons>a, .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons>span { font-size: 16px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-weight: 600 !important; border-radius: 5px !important; padding: 1.5rem !important; gap: 1rem !important; border: none !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; line-height: normal !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn { flex: 1; /* ~1/3 width */ background: #efefef !important; color: #000 !important; border-radius: 5px; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn img { filter: invert(0); /* Black text = black arrow */ } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn.disabled { background: #ededed !important; color: #aaa !important; cursor: not-allowed; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn.disabled img { filter: invert(0); opacity: 0.5; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn { flex: 2.2; /* ~2/3 width */ background: #548cff !important; color: #fff !important; border-radius: 5px; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn img { filter: invert(1); } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn.disabled { background: #ededed !important; color: #000 !important; cursor: not-allowed; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn.disabled img { filter: invert(0); } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns { display: flex; width: 100%; overflow: hidden; gap: 1.8%; flex-wrap: wrap; row-gap: 0.5rem; justify-content: center; } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns button.pageNumButton, .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns a.pageNumButton { font-size: 16px !important; font-weight: 600; width: 45px !important; height: 45px !important; background: #ededed !important; border-radius: 5px; display: flex; align-items: center; justify-content: center; border: none !important; cursor: pointer; text-decoration: none !important; color: inherit !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns button.pageNumButton.active, .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns a.pageNumButton.active { color: #fff !important; background: #548cff !important; } /* TYPEAHEAD NATIVE DROPDOWN STYLING FOR DESKTOP SEARCH PILLS */ .searchBySubjectPartMobile>.fieldCol .twitter-typeahead { width: 100% !important; height: 100% !important; display: block !important; position: relative !important; } .searchBySubjectPartMobile>.fieldCol .tt-menu { background: #fff !important; border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; margin-top: 5px !important; padding: 5px 0 !important; min-width: 250px !important; text-align: right !important; z-index: 9999 !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; } .searchBySubjectPartMobile>.fieldCol .tt-suggestion { padding: 12px 20px !important; color: #444 !important; font-size: 1.6rem !important; font-weight: 500 !important; cursor: pointer !important; border-bottom: 1px solid #f5f5f5 !important; text-align: right !important; } .searchBySubjectPartMobile>.fieldCol .tt-suggestion:hover, .searchBySubjectPartMobile>.fieldCol .tt-suggestion.tt-cursor { background: #f4f8ff !important; color: #4d8fe2 !important; } .searchBySubjectPartMobile>.fieldCol input.tt-hint { color: #ccc !important; } /* Modernize the desktop filtering sidebar visually to match mobile */ .secondaryCol .secondaryColContainer { background: white !important; border-radius: 20px !important; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06) !important; border: none !important; padding: 25px !important; overflow: hidden !important; } .secondaryCol .secondaryColContainer .filterBox h4, .secondaryCol .secondaryColContainer .filterBox .filterBoxTitle { background: transparent !important; color: #333 !important; font-weight: 800 !important; font-size: 2rem !important; border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 25px !important; text-align: center !important; } .secondaryCol .secondaryColContainer label { font-weight: 600 !important; margin-top: 15px !important; margin-bottom: 8px !important; display: block !important; color: #444 !important; } .secondaryCol .secondaryColContainer select, .secondaryCol .secondaryColContainer input[type="text"] { border-radius: 50px !important; border: 1px solid #e0e0e0 !important; background: #fff !important; padding: 8px 15px !important; width: 100% !important; height: 42px !important; margin-bottom: 0 !important; box-shadow: none !important; font-size: 1.4rem !important; color: #333 !important; } /* Clean up the Selectize wrapping elements */ .secondaryCol .secondaryColContainer .selectize-control.form-control { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } .secondaryCol .secondaryColContainer .selectize-input { border-radius: 50px !important; border: 1px solid #e0e0e0 !important; background: #fff !important; padding: 5px 15px !important; width: 100% !important; height: 42px !important; display: flex !important; align-items: center !important; box-shadow: none !important; font-size: 1.4rem !important; color: #333 !important; margin: 0 !important; } /* PREVENT SELECTIZE INTERNAL INPUT FROM INHERITING 42px HEIGHT AND ROUNDED BORDERS */ .secondaryCol .secondaryColContainer .selectize-input input[type="text"] { border: none !important; background: transparent !important; height: auto !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .secondaryCol .secondaryColContainer .selectize-input::after { display: none !important; } .secondaryCol .secondaryColContainer .priceRangeMirrors { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; margin-top: 10px !important; direction: rtl !important; font-size: 1.4rem !important; color: #555 !important; font-weight: 500 !important; } .secondaryCol .secondaryColContainer .sliderContainer { padding: 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } .secondaryCol .secondaryColContainer .sliderContainer .slider.slider-horizontal { width: calc(100% - 24px) !important; /* Exactly constrains width so handles lie perfectly flush with outer edge geometries */ margin: 0 12px !important; } /* All pill texts need to be light black not blue, and strictly VERTICALLY CENTERED */ .switchFrontOnline .switch div h4, .switchFrontOnline .switch div .switchBtnText, .sliderChooseGrade .slide .gradeContent button h4, .sliderChooseGrade .slide .gradeContent button .gradeText { color: #333 !important; font-weight: normal !important; /* Disabling heavy desktop weights per user specification */ font-size: 1.2em !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #loadingFrame { display: block; /* Removed !important to allow AJAX JS to successfully hide node */ width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* Reduce all pills to identical heights (48px) and center contents */ .switchFrontOnline .switch div button, .sliderChooseGrade .slide .gradeContent button { height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 25px !important; box-sizing: border-box !important; } /* Gaps between groups: single gap between rows, double gap under search row */ .wrapMiddleContent .switchFrontOnline { margin-bottom: 20px !important; } .wrapMiddleContent .sliderChooseGrade { margin-bottom: 20px !important; } .secondaryCol .secondaryColContainer select { appearance: none !important; -webkit-appearance: none !important; background-image: url('data:image/svg+xml;utf8,') !important; background-repeat: no-repeat !important; background-position: left 15px center !important; } .secondaryCol .secondaryColContainer .btn-group { display: flex !important; width: 100% !important; margin-bottom: 15px !important; gap: 10px !important; } .secondaryCol .secondaryColContainer .btn-group button { flex: 1 !important; border-radius: 50px !important; background: white !important; color: #548CFF !important; border: 2px solid #548CFF !important; margin: 0 !important; transition: all 0.2s !important; padding: 8px !important; font-weight: 600 !important; } .secondaryCol .secondaryColContainer .btn-group button.active { background: #548CFF !important; color: white !important; } /* Gaps & block separators */ .secondaryCol .secondaryColContainer div[class*="Box"], .secondaryCol .secondaryColContainer div[class*="Field"] { margin-bottom: 15px !important; /* Smaller, cleaner gap */ border-bottom: none !important; /* Remove line entirely */ padding-bottom: 0 !important; } .secondaryCol .secondaryColContainer div[class*="Box"]:last-child, .secondaryCol .secondaryColContainer div[class*="Field"]:last-child { margin-bottom: 0 !important; } /* Checkboxes un-squishing */ .secondaryCol .secondaryColContainer .checkbox-inline { display: flex !important; align-items: center !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 12px !important; gap: 10px !important; font-size: 1.4rem !important; color: #555 !important; font-weight: 400 !important; } .secondaryCol .secondaryColContainer .checkbox-inline input[type="checkbox"] { margin: 0 !important; width: 18px !important; height: 18px !important; position: static !important; } /* Slider Polish */ .secondaryCol .secondaryColContainer .slider-handle { background: #548CFF !important; background-image: none !important; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2) !important; border: 2px solid white !important; border-radius: 50% !important; } .secondaryCol .secondaryColContainer .slider-selection { background: #548CFF !important; background-image: none !important; } .secondaryCol .secondaryColContainer .slider-track { background: #eee !important; background-image: none !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; } #searchres>.teacherResult .wrapGrey .linkProfile { margin-top: 15px !important; margin-bottom: 10px !important; position: static !important; font-size: 1.4rem !important; font-weight: 700 !important; color: #707070 !important; /* Restored to subtle grey per mobile standard */ text-decoration: none !important; border-bottom: 1px solid #707070 !important; display: block !important; cursor: pointer !important; } .goBackBtn { display: none !important; /* Strange back button not needed on desktop */ } /* DESKTOP PAGINATION */ .paginationClass { display: flex !important; flex-direction: column !important; align-items: center !important; width: max-content !important; /* Bounds the wrapper exactly to the width of the 10 numbered buttons */ margin: 50px auto 30px auto !important; /* Centered */ gap: 15px !important; } .paginationClass .rightLeftButtons { display: flex !important; width: 100% !important; /* Exact width inheritance from wrapper */ justify-content: space-between !important; gap: 15px !important; padding: 0 !important; } .paginationClass .rightLeftButtons button, .paginationClass .rightLeftButtons a, .paginationClass .rightLeftButtons span { height: 48px !important; font-size: 1.6rem !important; /* Restoring text visibility */ font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; box-sizing: border-box !important; } .paginationClass .rightLeftButtons .rightBtn { flex: 1 !important; /* ~1/3 width */ background: #efefef !important; color: #000 !important; text-decoration: none !important; } .paginationClass .rightLeftButtons .leftBtn { flex: 2.2 !important; /* ~2/3 width */ color: #fff !important; text-decoration: none !important; } .paginationClass .paginationBtns { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: nowrap !important; gap: 4px !important; justify-content: center !important; } .paginationClass .paginationBtns button.pageNumButton, .paginationClass .paginationBtns a.pageNumButton { width: auto !important; min-width: 0 !important; max-width: 45px !important; flex: 1 1 0px !important; height: 38px !important; padding: 0 !important; font-size: 14px !important; text-decoration: none !important; } } /* Facts Accordion Defaults / Desktop */ .subjectFactsLead { font-size: 15px; line-height: 1.65; color: #334155; margin: 0 0 14px 0; } .factsAccordion { margin-bottom: 24px; border: none; background: transparent; } .factsAccordion .factsAccordionHeader { list-style: none; cursor: default; padding: 0 0 8px 0; } .factsAccordion .factsAccordionHeader::-webkit-details-marker { display: none; } .factsAccordionTitleWrap { display: flex; align-items: center; gap: 8px; } .factsAccordionTitleText { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.35; } .factsChevron { display: none; } .factsAccordionBody { padding: 0; } /* Subject Guide Stats Sections / Desktop */ .subjectGuide { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } .subjectGuide .guideAccordion { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; overflow: hidden !important; margin-bottom: 0 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .subjectGuide .guideAccordion:hover { border-color: #cbd5e1 !important; } .subjectGuide .guideAccordion[open] { border-color: #cbd5e1 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; } .subjectGuide .guideAccordion .guideAccordionHeader { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 18px 22px !important; cursor: pointer !important; user-select: none !important; list-style: none !important; outline: none !important; transition: background-color 0.15s ease !important; } .subjectGuide .guideAccordion .guideAccordionHeader:hover { background-color: #f8fafd !important; } .subjectGuide .guideAccordion .guideAccordionHeader:focus, .subjectGuide .guideAccordion .guideAccordionHeader:focus-visible, .subjectGuide .guideAccordion:focus, .subjectGuide .guideAccordion:focus-visible { outline: none !important; } .subjectGuide .guideAccordion .guideAccordionHeader::-webkit-details-marker { display: none !important; } .subjectGuide .guideAccordionTitleWrap { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 !important; min-width: 0 !important; } .subjectGuide .guideAccordionTitleText { font-size: 17px !important; font-weight: 700 !important; color: #1e293b !important; margin: 0 !important; line-height: 1.4 !important; } .guideChevron { display: block !important; color: #64748b !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .guideAccordion[open] .guideChevron { transform: rotate(180deg) !important; color: #548cff !important; } .faqAccordionList { display: flex; flex-direction: column; gap: 8px !important; } .faqAccordionList .guideAccordion { margin-bottom: 0 !important; } .reviewsGrid .reviewItem { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; } .reviewsGrid .reviewItem:hover { background: #ffffff !important; border-color: #548cff !important; box-shadow: 0 4px 14px rgba(84, 140, 255, 0.12) !important; transform: translateY(-2px); } .subjectGuide .guideAccordionBody { padding: 0 22px 22px 22px !important; border-top: 1px solid #f1f5f9 !important; padding-top: 16px !important; } /* Ensure mobile pages hide the furthest results effectively and conceal desktop search pill */ @media (max-width: 899px) { .hide-on-mobile { display: none !important; } .searchBySubjectPartMobile { display: none !important; } /* Mobile pagination hardening */ .container.searchResults .content .wrapMiddleContent .paginationClass { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 0.8rem !important; margin: 20px auto 30px auto !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons { display: flex !important; flex-direction: row !important; gap: 0.6rem !important; width: 100% !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons>button, .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons>a { font-size: 15px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-weight: 600 !important; border-radius: 6px !important; padding: 12px 10px !important; gap: 8px !important; text-decoration: none !important; box-sizing: border-box !important; border: none !important; cursor: pointer !important; line-height: normal !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn { flex: 1 !important; background: #ededed !important; color: #000 !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn img { filter: invert(0) !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn.disabled { background: #f1f5f9 !important; color: #94a3b8 !important; cursor: not-allowed !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .rightBtn.disabled img { opacity: 0.4 !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn { flex: 1.8 !important; background: #548cff !important; color: #fff !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn img { filter: invert(1) !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn.disabled { background: #f1f5f9 !important; color: #94a3b8 !important; cursor: not-allowed !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .rightLeftButtons .leftBtn.disabled img { filter: invert(0) !important; opacity: 0.4 !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns { display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; gap: 4px !important; flex-wrap: nowrap !important; justify-content: center !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns button.pageNumButton, .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns a.pageNumButton { font-size: 14px !important; font-weight: 600 !important; height: 38px !important; background: #ededed !important; border-radius: 6px !important; flex: 1 1 0px !important; width: auto !important; min-width: 0 !important; max-width: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #1e293b !important; box-sizing: border-box !important; border: none !important; padding: 0 !important; } .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns button.pageNumButton.active, .container.searchResults .content .wrapMiddleContent .paginationClass .paginationBtns a.pageNumButton.active { color: #fff !important; background: #548cff !important; } /* Mobile Guide Accordion */ .subjectGuide { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 20px !important; margin-bottom: 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .subjectGuide .guideAccordion { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; margin-bottom: 0 !important; overflow: hidden !important; transition: border-color 0.2s ease !important; } .subjectGuide .guideAccordion[open] { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important; } .subjectGuide .guideAccordion .guideAccordionHeader { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; cursor: pointer !important; user-select: none !important; list-style: none !important; outline: none !important; } .subjectGuide .guideAccordion .guideAccordionHeader:focus, .subjectGuide .guideAccordion .guideAccordionHeader:focus-visible, .subjectGuide .guideAccordion:focus, .subjectGuide .guideAccordion:focus-visible { outline: none !important; } .subjectGuide .guideAccordion .guideAccordionHeader::-webkit-details-marker { display: none !important; } .subjectGuide .guideAccordionTitleWrap { display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 !important; min-width: 0 !important; } .subjectGuide .guideAccordionTitleText { font-size: 15px !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.4 !important; margin: 0 !important; } .subjectGuide .guideChevron { display: block !important; color: #64748b !important; flex-shrink: 0 !important; width: 18px !important; height: 18px !important; transition: transform 0.25s ease !important; } .subjectGuide .guideAccordion[open] .guideChevron { transform: rotate(180deg) !important; color: #548cff !important; } .subjectGuide .guideAccordionBody { padding: 0 16px 16px 16px !important; border-top: 1px solid #f1f5f9 !important; padding-top: 14px !important; } /* Mobile Facts Accordion */ .subjectFactsLead { font-size: 14px !important; line-height: 1.5 !important; color: #334155 !important; margin: 0 0 10px 0 !important; } .subjectFacts { background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 15px !important; box-shadow: none !important; } .factsAccordion { background: #f8fafd !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; transition: background 0.2s ease, border-color 0.2s ease !important; } .factsAccordion[open] { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .factsAccordion .factsAccordionHeader { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 13px 14px !important; cursor: pointer !important; user-select: none !important; list-style: none !important; } .factsAccordion .factsAccordionHeader::-webkit-details-marker { display: none !important; } .factsAccordionTitleWrap { display: flex !important; align-items: center !important; gap: 8px !important; } .factsAccordionTitleText { font-size: 14px !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.4 !important; margin: 0 !important; } .factsChevron { display: block !important; color: #64748b !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .factsAccordion[open] .factsChevron { transform: rotate(180deg) !important; color: #548cff !important; } .factsAccordionBody { padding: 0 14px 14px 14px !important; border-top: 1px solid #f1f5f9 !important; padding-top: 12px !important; } /* Aggressively reduce massive inherited vertical white gaps */ .container.searchResults .content .wrapMiddleContent { padding-top: 10px !important; } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .switchFrontOnline { margin-top: 15px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; /* Strip the massive inherited 40px padding */ } .container.searchResults .content .wrapMiddleContent .wrapResultsTeachers .carousel.sliderChooseGrade { margin-top: 0px !important; margin-bottom: 15px !important; padding-top: 0 !important; } /* Safely condense internal huge pads in the "9,748" dark block */ .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .wrapSliderAd .wrapAdTeachers { margin-top: 0 !important; /* Strip the 2rem margin pushing the black block down */ } .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .wrapSliderAd .wrapAdTeachers .adTeachers .wrapAdWords { padding-block-start: 15px !important; /* Reduced heavily from 5rem */ } .container.searchResults .content .wrapMiddleContent .sliderPopular.goodtoknow .wrapSliderAd .wrapAdTeachers .carousel.sliderTeachers .slider { padding-top: 40px !important; /* Just enough to clear the 65px/2 floating profile pics without bleeding into text */ } .container.searchResults .content .wrapTopContent { display: flex !important; flex-direction: column !important; justify-content: center !important; /* Center content vertically in the banner */ align-items: stretch !important; padding-top: 40px !important; padding-bottom: 25px !important; min-height: 380px !important; box-sizing: border-box !important; } /* Enforce strict right-alignment and typography for Hero text on Mobile */ .container.searchResults .content .wrapTopContent .wrapCategoryName { order: 1 !important; /* FORCE TEXT ABOVE BUTTON */ padding-right: 25px !important; padding-left: 25px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 25px 0 !important; position: relative !important; z-index: 10 !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 { text-align: right !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* RTL flex-start is right */ justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span { text-align: right !important; width: 100% !important; display: block !important; color: #ffffff !important; text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6) !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.mediumText { font-size: 2.1rem !important; font-weight: 600 !important; line-height: 1.25 !important; margin-bottom: 3px !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.hugeTitle { font-size: 4.2rem !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 6px 0 !important; letter-spacing: -0.5px !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.subTitle { font-size: 1.8rem !important; font-weight: 600 !important; line-height: 1.3 !important; margin-top: 0 !important; opacity: 0.95 !important; } @media (max-width: 415px) { .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.hugeTitle { font-size: 3.6rem !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.mediumText { font-size: 1.9rem !important; } .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.subTitle { font-size: 1.6rem !important; } } @media (max-width: 360px) { .container.searchResults .content .wrapTopContent .wrapCategoryName h1 span.hugeTitle { font-size: 3.0rem !important; } } /* Perfect the mobile search element and position it below text natively */ .customMobileHeroSearchWrap { order: 2 !important; /* FORCE BUTTON BELOW TEXT */ position: relative !important; width: 85% !important; max-width: 440px !important; margin: 0 auto 15px auto !important; display: block !important; z-index: 50 !important; } .customMobileHeroSearchBtn { background: #fff !important; border-radius: 50px !important; width: 100% !important; height: 60px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: center !important; gap: 15px !important; border: none !important; padding: 0 20px !important; cursor: pointer !important; } .customMobileHeroSearchBtn span { font-size: 1.8rem !important; font-weight: 600 !important; color: #333 !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .customMobileHeroSearchIcon { background-image: url(/assets/newDesign/MagnifyGlassB.svg) !important; width: 22px !important; height: 22px !important; background-size: contain !important; background-repeat: no-repeat !important; background-color: transparent !important; border: none !important; } } /* --- searchRows.php gold badge & pointer --- */ /* Make the search result elements reliably show a pointer cursor so they feel deeply clickable */ div#searchres .teacherResult .wrapGrey .teacherDetails, div#searchres .teacherResult .wrapGrey .teacherDescrip, div#searchres .teacherResult .wrapGrey .image, div#searchres .teacherResult .wrapGrey .teacherLine, div#searchres .teacherResult .wrapGrey .descWide { cursor: pointer !important; } /* Premium GOLD Teacher Card styling - REMOVED card-level gold markings */ div#searchres .teacherResult .profileImg { position: relative !important; } .gold-recommendation-badge { position: absolute !important; bottom: -32px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%) !important; color: black !important; padding: 4px 15px !important; border-radius: 50px !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; font-size: 2rem !important; font-weight: 700 !important; box-shadow: 0 4px 8px rgba(212, 175, 55, 0.4) !important; border: 3px solid #fff !important; z-index: 100 !important; direction: ltr !important; cursor: pointer !important; } .gold-recommendation-badge .badge-text { line-height: 1 !important; padding-top: 2px !important; } .gold-recommendation-badge .span--5 { display: inline-block !important; width: 16px !important; height: 16px !important; background-image: url("/assets/packagesIcons/review.png") !important; background-size: contain !important; background-repeat: no-repeat !important; } .gold-recommendation-badge i { color: black !important; font-size: 1.4rem !important; } /* --- searchRows.php ad banner heights & flex --- */ /* Force uniform heights on all ad banner cards natively */ body div.wrapAdTeachers .carousel.sliderTeachers .slider { align-items: stretch !important; padding-top: 4rem !important; height: auto !important; /* Override potential 200px legacy height from theme.css */ max-height: none !important; /* Remove 500px max-height */ } body div.wrapAdTeachers .carousel.sliderTeachers .slider .slide { height: auto !important; aspect-ratio: auto !important; /* Destroy legacy strict width/height ratio */ } body div.wrapAdTeachers .carousel.sliderTeachers .slider .slide .teachersContent { height: 100% !important; padding-bottom: 2rem !important; justify-content: flex-start !important; } /* Apply ellipsis line truncation to long reviews */ body div.wrapAdTeachers .carousel.sliderTeachers .slider .slide .teachersContent h4 { display: -webkit-box !important; -webkit-line-clamp: 5 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.4 !important; } /* 1-Line Desktop Flex Layout: Image, Gallery, Words */ @media screen and (min-width: 900px) { body div.wrapAdTeachers { display: flex !important; flex-direction: row !important; align-items: stretch !important; /* Force to inherit tallest block height */ justify-content: space-between !important; padding-bottom: 0 !important; } body div.wrapAdTeachers .adTeachers { display: contents !important; /* Magic structural flattening */ } body div.wrapAdTeachers .adTeachers .wrapAdWords { order: 1 !important; /* Far Right logically */ flex: 0 0 16% !important; text-align: right !important; padding-left: 1rem !important; align-self: center !important; /* Visually float organically relative to center height */ } body div.wrapAdTeachers .adTeachers .wrapAdWords h3 { font-size: 2vw !important; /* Responsive fluid text width */ } body div.wrapAdTeachers .carousel.sliderTeachers { order: 2 !important; /* Centered visually */ flex: 1 1 60% !important; min-width: 0 !important; display: block !important; /* Return to block container */ position: relative !important; /* Anchor for absolute arrows */ } body div.wrapAdTeachers .carousel.sliderTeachers .slider { padding-top: 8rem !important; /* Huge void to perfectly house isolated arrows + circles */ } body div.wrapAdTeachers .buttonsScrollDesktopOnly { position: absolute !important; top: 2rem !important; /* Exact same 20px physical gap as the bottom edge natively */ left: 0 !important; /* Flush left of internal gallery container */ right: auto !important; justify-content: flex-start !important; z-index: 50 !important; } body div.wrapAdTeachers .adTeachers .clipImage { order: 3 !important; /* Far Left logically */ flex: 0 0 20% !important; height: auto !important; width: 20% !important; align-self: flex-start !important; /* Anchor to exact top as requested */ margin-right: auto !important; } } /* --- searchRows.php article slider --- */ /* GLOBAL SCROLLBAR HIDING FOR SLIDERS (Mobile & Desktop) */ div#searchres .carousel .slider::-webkit-scrollbar, body div.wrapAdTeachers .carousel.sliderTeachers .slider::-webkit-scrollbar { display: none !important; } div#searchres .carousel .slider, body div.wrapAdTeachers .carousel.sliderTeachers .slider { -ms-overflow-style: none !important; /* IE and Edge */ scrollbar-width: none !important; /* Firefox */ } @media screen and (max-width: 600px) { .container.searchResults .content .wrapMiddleContent .titleButtons h3 { color: #000 !important; } .container.searchResults .content .wrapMiddleContent .wrapSliderAd .carousel .slider .slide .happensSliderTitle h4 { color: #fff !important; } } /* Restore Original Mobile-Style Stacked Layout native structure for all screens */ div#searchres .wrapSliderAd .wrapGrey .carousel .slider { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 1.5rem !important; padding: 0 1.5rem 3.5rem 1.5rem !important; margin: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; /* Strip native 500px height void */ max-height: none !important; /* Strip native 500px max-height void */ } div#searchres .sliderPopular.goodtoknow { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; } /* FORCE MOBILE ARTICLE DESIGN ON DESKTOP */ div#searchres .wrapSliderAd .wrapGrey { background: #f8f8f8 !important; /* Soft grey background */ padding: 2.5rem 2.5rem 0 2.5rem !important; /* Removed bottom padding */ margin-bottom: 0 !important; /* Ensure removed bottom margin */ border-radius: 20px !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide { flex: 0 0 auto !important; width: 150px !important; /* Strict card width per user request */ height: 200px !important; /* Strict card height per user request */ border-radius: 20px !important; position: relative !important; background: #fff !important; z-index: 1 !important; /* Stacking context for shadow */ box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.1) !important; /* Shadow on bottom only */ margin-left: 1.5rem !important; /* Perfect gap between cards */ } /* Reset desktop filter blurring */ div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide:before { content: "" !important; position: absolute !important; width: 80% !important; height: 100% !important; left: 10% !important; bottom: -17px !important; filter: blur(17px) !important; opacity: 0.45 !important; border-radius: 50rem !important; background: #252525 !important; z-index: -1 !important; display: block !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .wrapImageSlider { width: 100% !important; height: 100% !important; border-radius: 20px !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .wrapImageSlider img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 20px !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #548cff !important; color: #fff !important; height: 48% !important; /* Lower half */ box-sizing: border-box !important; padding: 1.2rem !important; z-index: 50 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; border-radius: 0 0 20px 20px !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle h4 { color: #fff !important; font-size: 1.7rem !important; font-weight: bold !important; margin: 0 0 0.2rem 0 !important; text-align: center !important; width: 100% !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle h6 { color: #fff !important; font-size: 1rem !important; margin: 0 !important; text-align: center !important; width: 100% !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .numCircle { display: none !important; } /* Align Native Title and Scroll Arrows horizontally */ div#searchres .wrapSliderAd .titleButtons { display: flex !important; justify-content: space-between !important; /* Push title and arrows to edges */ align-items: center !important; margin-bottom: 0.5rem !important; padding: 0 1.5rem !important; } div#searchres .wrapSliderAd .titleButtons h3 { color: #333333 !important; margin: 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; } div#searchres .wrapSliderAd .titleButtons .buttonsScroll { margin: 0 !important; /* Strip native auto-margins */ margin-left: 0 !important; /* Explicitly remove left margin */ padding-left: 0 !important; display: flex !important; align-items: center !important; gap: 0.8rem !important; } /* Let the SVG provide the singular circle natively */ div#searchres .wrapSliderAd .titleButtons .buttonsScroll a { cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 30px !important; height: 30px !important; background: #ffffff !important; border-radius: 50% !important; border: none !important; box-shadow: none !important; } div#searchres .wrapSliderAd .titleButtons .buttonsScroll a img { width: 100% !important; height: 100% !important; max-width: none !important; } /* MOBILE SPECIFIC REFINEMENTS FOR INTERNAL SPACING AND HEIGHT */ @media screen and (max-width: 899px) { /* Article Banner Spacing */ div#searchres .wrapSliderAd .wrapGrey { padding: 1.5rem 0 0 0 !important; /* Top padding only, no bottom margin/padding */ margin-bottom: 4.5rem !important; /* Requested spacing boost */ } div#searchres .wrapSliderAd .titleButtons { padding: 0 1.5rem !important; margin: 0 0 1.5rem 0 !important; display: flex !important; justify-content: space-between !important; /* Bundles arrows hard left in RTL */ align-items: center !important; gap: 1.5rem !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider { padding: 0 1.5rem 3.5rem 1.5rem !important; /* User requested 3.5rem bottom padding */ margin: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; /* Strip native 500px height void */ max-height: none !important; /* Strip native 500px max-height void */ } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide { margin-left: 1.5rem !important; /* Perfect gap between cards */ margin-right: 0 !important; width: 150px !important; /* Update width to 150px per user request */ height: 200px !important; /* Fixed user requested height */ max-height: 200px !important; flex: 0 0 auto !important; position: relative !important; border-radius: 20px !important; /* Align with container */ box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.1) !important; /* Shadow on bottom only */ z-index: 1 !important; /* Stacking context for shadow */ } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .wrapImageSlider { width: 100% !important; height: auto !important; aspect-ratio: 4/5 !important; position: relative !important; border-radius: 20px 20px 0 0 !important; overflow: hidden !important; /* Forces physical clipping on the image */ } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .wrapImageSlider img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 20px 20px 0 0 !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; transform: none !important; height: auto !important; max-height: none !important; padding: 1.5rem 1rem !important; height: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-direction: column !important; border-radius: 0 0 20px 20px !important; /* Square corner fix */ overflow: hidden !important; } div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle h4, div#searchres .wrapSliderAd .wrapGrey .carousel .slider .slide .happensSliderTitle h6 { text-align: center !important; width: 100% !important; } /* Teacher Recommendations Banner Spacing */ body div.wrapAdTeachers .adTeachers .wrapAdWords { padding-right: 1.5rem !important; padding-top: 1.5rem !important; } body div.wrapAdTeachers .carousel.sliderTeachers .slider { padding: 1rem 1.5rem 2rem 1.5rem !important; margin: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; /* Strip native 500px height void */ max-height: none !important; /* Strip native 500px max-height void */ } body div.wrapAdTeachers .carousel.sliderTeachers .slider .slide { margin-left: 0 !important; margin-right: 0.8rem !important; width: 60vw !important; height: auto !important; max-height: none !important; flex: 0 0 auto !important; } } /* Semantic markup tag replacement styles ensuring 100% visual styling fidelity */ .teachersContent .slideTeacherLabel { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0 0 4px 0; } .teachersContent .slideTeacherName { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px 0; } .teachersContent .slideTeacherContent { font-size: 1.3rem; line-height: 1.3; } .happensSliderTitle .happensTitle { font-size: 1.6rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; text-align: center; } .happensSliderTitle .happensSubTitle { font-size: 1.3rem; color: #64748b; text-align: center; } .relatedSearchesListTitle { font-size: 1.6rem; font-weight: 700; color: #1e293b; margin-bottom: 12px; } .filterBoxTitle { font-size: 2rem; font-weight: 800; color: #333; margin-bottom: 25px; text-align: center; }