/*--------------------------------------------------------------
# TIU overrides
#
# Loads after every Edufit stylesheet, so the template CSS files stay
# untouched and all brand-specific rules live in one place.
--------------------------------------------------------------*/

/*--- Brand logo ---------------------------------------------*/
/* The TIU mark carries the full university name next to the globe, so it
   needs more height than the template's wordmark to stay readable. */
.brand-logo img,
.footer-logo img {
  height: 56px;
  width: auto;
}

@media screen and (max-width: 575px) {
  .brand-logo img,
  .footer-logo img {
    height: 44px;
  }
}

/*--- Preloader ----------------------------------------------*/
.preloader .loader img {
  width: 240px;
  height: auto;
}

@media screen and (max-width: 575px) {
  .preloader .loader img {
    width: 170px;
  }
}

/*--- Hero heading decoration --------------------------------*/
/* The orange marks are absolutely positioned 45px to the right of the
   highlighted word. In English that word ends a line, so they land in empty
   space; in Russian and Uzbek it falls mid-line and they covered the next
   word. Pinning them inside the span (right: 0) keeps them off the following
   word in every language, a little reserved space keeps them off the word
   they decorate, and a slightly smaller mark keeps the heading on two lines
   instead of pushing a third. */
.hero-wrapper .hero-content h1 span.c1 {
  padding-right: 20px;
}

.hero-wrapper .hero-content h1 span.c1 .shape-one {
  top: -34px;
  right: 0;
  pointer-events: none;
}

.hero-wrapper .hero-content h1 span.c1 .shape-one img {
  width: 36px;
  height: auto;
}

@media (max-width: 767px) {
  /* The template hides the whole highlighted word on phones, which drops a
     word out of the sentence. Hide only the decoration. */
  .hero-wrapper .hero-content h1 span.c1 {
    display: inline;
    padding-right: 0;
  }
  .hero-wrapper .hero-content h1 span.c1 .shape-one {
    display: none;
  }
}

/*--- Course details: banner ---------------------------------*/
/* The template ships one fixed-size banner per demo course, so its CSS sets
   no width. Our courses carry their own images (an uploaded cover, or the
   catalog thumbnail as a fallback), which are smaller and left a stamp-sized
   picture in a wide column. Filling the column keeps the page looking like
   the template whatever size the image has; the cap stops a tall thumbnail
   from pushing the title off the screen. */
.course-details-wrapper .course-thumbnail img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
}

/*--- Course details: review count ---------------------------*/
.course-details-wrapper .course-info .ef-rating-box .ratings li span.reviews-count {
  margin-left: 6px;
  color: var(--text-color);
  font-size: 15px;
}

/*--- Course sidebar: "This course includes" list ------------*/
/* The template right-aligns every value with float: right, which only works
   while the label fits on one line. The Russian and Uzbek labels are longer
   ("Tayyorgarlik darajasi", "Общая продолжительность"), so the floated value
   dropped onto the next row and collided with the line below it. A flex row
   keeps the value on the label's own line and lets it wrap under itself. */
.sidebar-widget-area .sidebar-widget.sidebar-course-info-widget .widget-content .course-info ul li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-widget-area .sidebar-widget.sidebar-course-info-widget .widget-content .course-info ul li span {
  float: none;
  min-width: 0;
  text-align: right;
}

/*--- Uploaded images: fixed slots ---------------------------*/
/* The template was built around photos cut to its own sizes: most slots only
   set width: 100%, so the height followed whatever file was in place and an
   upload of another shape moved the layout (uneven cards) or, where a box has
   a fixed size, squashed the picture. Every slot an admin can fill now has a
   fixed aspect box and object-fit: cover, so any uploaded picture fills its
   slot and is cropped from the centre instead of stretched. The ratios below
   are the template's own image sizes, so the pages look exactly as before.
   The admin still uploads whatever it has; see App\Filament\Support\ImageUpload. */

/* Course cards: the catalog grid is squarer than the home row. */
.ef-course-grid-item.style-one .course-thumbnail img {
  width: 100%;
  aspect-ratio: 410 / 250;
  object-fit: cover;
}

.ef-course-grid-item.style-three .course-thumbnail img,
.sidebar-widget-area .sidebar-widget.sidebar-course-info-widget .widget-content .course-preview img {
  width: 100%;
  aspect-ratio: 300 / 220;
  object-fit: cover;
}

/* Blog cards and the post banner. */
.ef-blog-grid-item.style-one .post-thumbnail img {
  width: 100%;
  aspect-ratio: 410 / 260;
  object-fit: cover;
}

.ef-blog-grid-item.style-three .post-thumbnail img {
  width: 100%;
  aspect-ratio: 410 / 350;
  object-fit: cover;
}

.ef-blog-post .post-thumbnail img {
  width: 100%;
  aspect-ratio: 930 / 500;
  max-height: 460px;
  object-fit: cover;
}

/* Instructor cards: square on the home row, portrait everywhere else. */
.ef-instructor-item.style-one .instructor-thumbnail img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ef-instructor-item.style-three .instructor-thumbnail img,
.ef-instructor-item.style-four .instructor-thumbnail img,
.instructor-details-wrapper .instructor-item .instructor-thumbnail img,
.course-details-wrapper .course-instructor-box .instructor-thumbnail img {
  width: 100%;
  aspect-ratio: 410 / 420;
  object-fit: cover;
}

/* Small avatars sit in boxes of a fixed size: crop them, never squash. */
.author-box .author-thumb img,
.instructor-box .thumbnail img,
.course-details-wrapper .rating-box .author-avatar img,
.comment-author .author-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The recent-post thumbnails letterboxed the picture inside a square. */
.sidebar-widget-area .sidebar-widget.sidebar-post-widget .recent-post-list .post-thumbnail-content img {
  object-fit: cover;
}

/* The two about-page pictures are stacked by hand at the template's sizes, so
   they keep their boxes and crop whatever lands in them. */
/* These keep the template's own width (they are placed by hand inside a
   570px-tall box), so the width stays fixed and only the shape is pinned. */
.edufit-image-box.style-one .edufit-img.image_one img {
  width: 410px;
  max-width: 100%;
  aspect-ratio: 410 / 450;
  object-fit: cover;
}

.edufit-image-box.style-one .edufit-img.image_two img {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 260 / 130;
  object-fit: cover;
}

.edufit-image-box.style-four .edufit-img.image_one img {
  width: 440px;
  max-width: 100%;
  aspect-ratio: 440 / 455;
  object-fit: cover;
}

.edufit-image-box.style-four .edufit-img.image_two img {
  width: 314px;
  max-width: 100%;
  aspect-ratio: 314 / 360;
  object-fit: cover;
}

/* Lesson popup (partials/lesson-player): our own markup instead of a bare provider iframe,
   so it can carry the title and the Oldingi/Keyingi buttons. */
.lesson-popup {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.lesson-player {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.lesson-player-title {
  margin-bottom: 16px;
}

.lesson-player-video iframe,
.lesson-player-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.lesson-player-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.lesson-player-nav [data-lesson-next] {
  margin-left: auto;
}

.lesson-player-nav [data-lesson-next] button {
  border: 0;
}

.lesson-player-message {
  margin: 16px 0 0;
  font-weight: 600;
}

/* Quiz inside the same popup container (partials/quiz-form, quiz-result). */
.quiz-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.quiz-question {
  margin-bottom: 20px;
  border: 0;
  padding: 0;
}

.quiz-question legend {
  font-weight: 600;
  margin-bottom: 8px;
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
  cursor: pointer;
}

.quiz-option input {
  margin-top: 5px;
}

.quiz-error {
  color: #c0392b;
  font-weight: 600;
}

.quiz-score {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
}

.quiz-verdict {
  font-weight: 600;
}

.quiz-verdict.is-passed {
  color: #1e8449;
}

.quiz-verdict.is-failed {
  color: #c0392b;
}

.quiz-result-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.quiz-result-nav > :last-child {
  margin-left: auto;
}

/*--- Curriculum rows that are still locked -------------------*/
/* A shut lesson or quiz is a <span>, not a link to its own 403 page. It has to
   read like the row next to it, only muted and inert. */
.course-details-wrapper .edufit-content-box ul.video-list li .text .locked-item {
  color: var(--text-color);
  cursor: default;
}

/* On a phone the title and the duration fight over the row's width and the
   duration breaks after the number ("8" over "daqiqa"). It is one short label:
   keep it whole and let the title take what is left. */
.course-details-wrapper .edufit-content-box ul.video-list li .duration {
  flex-shrink: 0;
  white-space: nowrap;
}

/*--- Header account menu ------------------------------------*/
/* The template paints every .edufit-dropdown trigger white, which is right in
   the dark top bar and wrong here: the signed-in name sat white on the white
   header, so the only way out of the account was an invisible click. The menu
   is also pinned to the right edge, since the trigger is the last thing in the
   header. */
.nav-right-item .account-dropdown > a {
  color: var(--heading-color);
}

.nav-right-item .account-dropdown > a:hover {
  color: var(--primary-color);
}

.nav-right-item .account-dropdown .dropdown {
  left: auto !important;
  right: 0 !important;
  min-width: 140px;
}

.nav-right-item .account-dropdown .dropdown button {
  color: var(--text-color);
  font-size: 14px;
}

.nav-right-item .account-dropdown .dropdown button:hover {
  color: var(--primary-color);
}

/* The illustration beside the login and sign-up forms is 927px tall, which
   scrolls the page on a laptop screen for no reason. The panel is as tall as
   the window, so the picture is capped to it (minus the template's 30px
   padding, top and bottom) and keeps its proportions. */
.ef-user-sec .user-left img {
  max-height: calc(100vh - 60px);
  width: auto;
}

/*--- Catalog filters, folded on a phone ----------------------*/
/* One icon in the corner rather than a bar across the page: the list is what
   the student came for. The badge carries the count of what is set, so a
   folded panel is never a silently narrowed list. */
.filter-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 20px auto;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--white-color);
  color: var(--heading-color);
  font-size: 18px;
}

.filter-toggle[aria-expanded="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

.filter-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.filter-toggle[aria-expanded="true"] .filter-count {
  background: var(--white-color);
  color: var(--primary-color);
}

/*--- The footer's legal links --------------------------------*/
/* Under the copyright line, where people look for them. */
.footer-copyright .legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.footer-copyright .legal-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-copyright .legal-links a:hover {
  color: var(--primary-color);
}

/*--- The legal pages themselves ------------------------------*/
/* Long prose, nothing else on the page: the measure is what makes it
   readable. The body comes from the admin panel's editor. */
.legal-page .legal-updated {
  margin-bottom: 30px;
  color: var(--text-color);
  font-size: 14px;
}

.legal-page h4 {
  margin-top: 36px;
  margin-bottom: 14px;
}

.legal-page ul {
  margin-bottom: 20px;
  padding-left: 20px;
  list-style: disc;
}

.legal-page li {
  margin-bottom: 8px;
}

/*--- Language on a narrow screen -----------------------------*/
/* The template hides the whole top bar below lg and its language control opens
   on hover, which a touch screen has not got. So on those widths the bar comes
   back carrying the three languages laid flat — one tap each — while the
   address and the e-mail, which have no room there, stay away. */
.top-languages {
  display: none;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-languages a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.top-languages a.is-current {
  color: var(--white-color);
  font-weight: 600;
}

/* Below xl the site is in its hamburger layout and a pointer is no longer a
   safe assumption, so the hover dropdown gives way to the flat list. */
@media screen and (max-width: 1199px) {
  .header-top .language-dropdown {
    display: none;
  }

  .top-languages {
    display: flex;
  }
}

/* Below lg the bar is hidden altogether by the template. It comes back for the
   languages alone: the address and the e-mail have no room on a phone. */
@media screen and (max-width: 991px) {
  .header-top {
    display: block;
    padding: 6px 0;
  }

  .header-top .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  .header-top .top-left {
    display: none;
  }
}

/*--- The phone menu's own buttons ----------------------------*/
/* "Log in" and "Sign up" fit side by side, but their Russian and Uzbek names
   do not: the two ran onto separate lines, each a different width. Half the
   row each, whatever the language. */
.edufit-nav-menu .edufit-nav-button {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.edufit-nav-menu .edufit-nav-button > * {
  flex: 1 1 0;
  min-width: 0;
}

.edufit-nav-menu .edufit-nav-button .theme-btn {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  /* The template gives the outline button 18px against the filled one's 16px,
     which in a half-row is the difference between one line and two. */
  font-size: 16px;
  text-align: center;
}

/*--- The exam, on its own page ------------------------------*/
/* One question on the screen at a time, with the question numbers along the
   bottom. The card now stands on the page's own white instead of inside the
   popup, so it carries a border of its own. */
.quiz-page .quiz-box {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--border-color);
}

.quiz-page .quiz-title {
  margin-bottom: 4px;
}

.quiz-pass-mark {
  color: var(--text-color);
}

.quiz-step-count {
  margin: 24px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

.quiz-exam .quiz-question {
  margin: 0 0 24px;
}

.quiz-exam .quiz-question legend {
  font-size: 20px;
  margin-bottom: 14px;
}

/* The whole row is the target, not the 13px circle inside it. */
.quiz-exam .quiz-option {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.quiz-exam .quiz-option:hover {
  border-color: var(--primary-color);
}

.quiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.quiz-nav [data-quiz-next],
.quiz-nav [data-quiz-submit],
.quiz-summary [type="submit"] {
  margin-left: auto;
}

.quiz-nav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.quiz-summary {
  margin-top: 8px;
  padding: 20px;
  border-radius: 8px;
  background: var(--gray-color);
}

.quiz-summary h6 {
  margin-bottom: 6px;
}

.quiz-summary p {
  margin-bottom: 16px;
}

/* The numbers: where the student is, and what is still blank. */
.quiz-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-color);
}

.quiz-pager button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  color: var(--text-color);
}

.quiz-pager button.is-answered {
  background: var(--gray-color);
  border-color: var(--primary-color);
  color: var(--heading-color);
}

.quiz-pager button[aria-current="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

/* A so'm price is longer than the template's "$23.00" and broke across two
   lines in the card footer; it stays on one line and the author name beside
   it gives way instead. */
.course-price .price,
.course-info h4 .price {
  white-space: nowrap;
}

.ef-course-item .course-footer .instructor-box {
  min-width: 0;
}

@media screen and (max-width: 575px) {
  .quiz-page .quiz-box {
    padding: 20px;
  }

  /* Two buttons and a sentence do not fit a phone's width side by side, and a
     half-width button under a thumb is a worse target than a full-width one. */
  .quiz-summary .quiz-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .quiz-summary .quiz-nav .theme-btn {
    width: 100%;
    text-align: center;
  }
}