/*
    Storefront additions on top of the HiStudy theme.

    The theme itself lives under /site and is left untouched, so it can be updated or
    compared against the original. Everything specific to this site goes here, and every
    colour, radius and font comes from the theme's own CSS variables.
*/

/* --------------------------------------------------------------------------
   Cover placeholder — a book or game without an uploaded image keeps the card's
   shape instead of collapsing. The ratio matches the theme's 710x488 card images.
   -------------------------------------------------------------------------- */
.ob-cover-placeholder {
    aspect-ratio: 710 / 488;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border-radius: var(--radius);
    color: var(--color-white);
    text-align: center;
}

.ob-cover-placeholder i {
    font-size: 44px;
    opacity: 0.9;
}

.ob-cover-placeholder span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}

.ob-tone-book { background: var(--gradient-7); }
.ob-tone-0 { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); }
.ob-tone-1 { background: linear-gradient(135deg, var(--color-secondary), var(--color-pink)); }
.ob-tone-2 { background: linear-gradient(135deg, var(--color-coral), var(--color-warning)); }
.ob-tone-3 { background: linear-gradient(135deg, #1fa58a, var(--color-primary)); }
.ob-tone-4 { background: linear-gradient(135deg, var(--color-violet), var(--color-secondary)); }
.ob-tone-5 { background: linear-gradient(135deg, var(--color-pink), var(--color-coral)); }

/* Book covers keep the theme card's shape but are letterboxed rather than cropped: the
   theme's cards are landscape, most book covers are portrait. Outranks the theme's
   ".rbt-card .rbt-card-img a img", which crops to fill. */
.rbt-card .rbt-card-img .ob-book-cover {
    display: block;
    width: 100%;
    aspect-ratio: 710 / 488;
    object-fit: contain;
    background: var(--color-extra2);
    border-radius: var(--radius);
}

/* Detail page cover: the theme's thumbnail box is full column width, which would make a
   portrait cover very tall. */
.ob-detail-cover {
    max-height: 560px;
    object-fit: contain;
    background: var(--color-extra2);
    border-radius: var(--radius);
}

/* Buy buttons kept in their theme place until online checkout exists. */
.ob-btn-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* Initial-letter avatars where the theme expects a photo. */
.ob-avatar.ob-avatar-sm {
    width: 40px;
    min-width: 40px;
    height: 40px;
    font-size: 16px;
}

.ob-avatar.ob-avatar-lg {
    width: 120px;
    min-width: 120px;
    height: 120px;
    font-size: 44px;
}

/* Catalogue: "clear filters" under the filter panel, empty result, page gap in pagination. */
.ob-filter-clear {
    padding-top: 16px;
    text-align: right;
}

/* The theme sizes the price filter's button only when it is an <a>; ours submits the form. */
.price__output--wrap .price--filter button.rbt-btn {
    padding: 6px 10px;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    line-height: 16px;
    height: auto;
}

/* Price slider handles are dragged with a finger too (catalogue.js); keep the page still. */
#slider-range {
    touch-action: none;
}

/* A price filter in use with no slider to show it on. */
.ob-price-note {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-heading);
}

.ob-catalogue-empty {
    padding: 60px 30px;
    text-align: center;
    background: var(--color-white);
    border-radius: var(--radius);
}

.ob-catalogue-empty i {
    display: block;
    margin-bottom: 16px;
    font-size: 48px;
    color: var(--color-primary);
    opacity: 0.6;
}

.ob-catalogue-empty p {
    margin: 0 0 24px;
}

.rbt-pagination .ob-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    color: var(--color-body);
}

/* Empty cart panel. */
.ob-cart-empty {
    padding: 60px 0 40px;
    text-align: center;
    color: var(--color-body);
}

.ob-cart-empty i {
    display: block;
    margin-bottom: 16px;
    font-size: 48px;
    opacity: 0.5;
}

.ob-cart-empty p {
    margin: 0;
    font-size: 16px;
}

/* Shown in a homepage section that has nothing to list yet. */
.ob-empty-state {
    margin: 0;
    text-align: center;
    font-size: 18px;
    color: var(--color-body);
}

/* Small muted note on the left of a card's bottom row (e.g. "Abonelere açık"). */
.ob-card-note {
    font-size: 15px;
    color: var(--color-body);
}

.ob-card-note i {
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Account dropdown: avatar initial, e-mail line and the sign-out button.
   -------------------------------------------------------------------------- */
.ob-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 100%;
    background: var(--gradient-7);
    color: var(--color-white);
    font-size: 20px;
    font-weight: 600;
    box-shadow: var(--shadow-1);
}

.ob-account-email {
    display: block;
    font-size: 13px;
    color: var(--color-body);
    word-break: break-all;
}

.ob-inline-form {
    margin: 0;
}

/* Sign-out has to be a form button (it's a POST); dressed as the menu's links. */
.rbt-user-menu-list-wrapper .user-list-wrapper .ob-menu-button {
    display: flex;
    width: 100%;
    padding: 5px 12px;
    align-items: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--color-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rbt-user-menu-list-wrapper .user-list-wrapper .ob-menu-button i {
    max-height: 17px;
    margin-right: 7px;
    font-size: 17px;
}

.rbt-user-menu-list-wrapper .user-list-wrapper .ob-menu-button span {
    font-size: 14px;
}

.rbt-user-menu-list-wrapper .user-list-wrapper .ob-menu-button:hover {
    color: var(--color-primary);
    background: var(--black-opacity);
}

/* TempData messages (Views/Shared/_SiteAlerts.cshtml) are Bootstrap alerts; the theme's
   10px root font would shrink their rem-based padding and text. */
.ob-section-alerts .alert {
    padding: 16px;
    font-size: 16px;
}

.ob-section-alerts .alert-dismissible {
    padding-right: 48px;
}

/* Error page: support reference under the message. */
.ob-error-reference {
    font-size: 14px;
    opacity: 0.8;
}

/* Account sidebar: sign-out is a form button (it's a POST), dressed as the sidebar's links. */
.rbt-default-sidebar-wrapper .rbt-default-sidebar-list li .ob-inline-form {
    width: 100%;
}

.rbt-default-sidebar-wrapper .rbt-default-sidebar-list .ob-sidebar-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-body);
    text-align: left;
    transition: 0.4s;
}

.rbt-default-sidebar-wrapper .rbt-default-sidebar-list .ob-sidebar-button i {
    margin-right: 10px;
    font-size: 16px;
    color: var(--color-body);
}

.rbt-default-sidebar-wrapper .rbt-default-sidebar-list .ob-sidebar-button span {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

.rbt-default-sidebar-wrapper .rbt-default-sidebar-list .ob-sidebar-button:hover,
.rbt-default-sidebar-wrapper .rbt-default-sidebar-list .ob-sidebar-button:hover i {
    color: var(--color-primary);
}

/* Account banner: the initial sits in the theme's 120px avatar slot. */
.rbt-tutor-information .thumbnail .ob-avatar {
    border: 5px solid var(--color-white);
    box-shadow: var(--shadow-1);
}

/* Account forms (theme: login.html). A field's error message goes inside its .form-group,
   after the theme's input/label/focus-border, and is lifted out of the flow into the gap
   below the field — in the flow it would push the focus line (bottom: 0) under the message.
   input-validation-error is set by ASP.NET Core (server side) and by unobtrusive validation
   (in the browser) alike. */
.rbt-contact-form .form-group .ob-field-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-danger);
}

.rbt-contact-form .form-group input.input-validation-error {
    border-bottom-color: var(--color-danger);
}

/* Form-level problems (wrong password, address already registered) above the fields. */
.ob-form-alert {
    margin-bottom: 30px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: rgba(255, 0, 3, 0.06);
    color: var(--color-danger);
    font-size: 15px;
    line-height: 22px;
}

.ob-form-alert ul {
    margin: 0;
    padding-left: 18px;
}

.ob-form-alert li {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.ob-form-intro {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 26px;
}

.ob-form-footer {
    margin: 24px 0 0;
    font-size: 15px;
    text-align: center;
}

/* Password-reset confirmation: large round icon in the form's place (colours come from the theme's bg-primary-opacity on the same element). */
.ob-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    border-radius: 100%;
    font-size: 40px;
}

/* Link inside running text (form intros, error page). Theme links are heading-coloured with no underline, so mid-sentence they look like plain text. */
.ob-text-link {
    color: var(--color-primary);
    font-weight: 500;
}

.ob-text-link:hover,
.ob-text-link:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Siparişlerim: an order's items share one table cell (theme student-order-history); a thin rule keeps them apart. */
.ob-order-item + .ob-order-item {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

/* Oyunlarım: subscription notice. Uses the theme's .rbt-saved-message box (my-account.html), adds an icon and body-size text. */
.rbt-saved-message.ob-access-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

/* Oyunlarım: notice icon, same colour as the box's top border. */
.rbt-saved-message.ob-access-notice > i {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 26px;
    color: var(--color-primary);
}

/* Oyunlarım: the notice's opening phrase. */
.rbt-saved-message.ob-access-notice strong {
    color: var(--color-heading);
    font-weight: 600;
}

/* Oyunlarım: green for an active subscription, orange for one that ended or was never bought. */
.rbt-saved-message.ob-access-notice-success { border-top-color: var(--color-success); }
.rbt-saved-message.ob-access-notice-success > i { color: var(--color-success); }
.rbt-saved-message.ob-access-notice-warning { border-top-color: var(--color-warning); }
.rbt-saved-message.ob-access-notice-warning > i { color: var(--color-warning); }

/* Oyunlarım: an empty tab keeps some height, so switching tabs doesn't collapse the box. */
.tab-content .tab-pane > .ob-empty-state {
    padding: 40px 0;
}

/* Game card for a game that can't be opened: the cover has no link around it, so the bare image gets the same styling as the theme's ".rbt-card-img a img". This also fixes the home page's "Yakında" cards once they have a real cover image. */
.rbt-card .rbt-card-img > img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Oyun Sonuçlarım: four theme counter cards share the narrow dashboard column (equal heights, slimmer sides). */
.ob-account-counters .rbt-counterup {
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* The theme keeps 24px each side of a counter for its "+" sign, which .without-icon hides; give the room back. */
.ob-account-counters .rbt-counterup .inner .content .counter {
    padding: 0;
}

/* Text figures (percent, duration, date) run longer than the theme's short numbers. */
.ob-account-counters .rbt-counterup .inner .content .counter.ob-counter-text {
    font-size: 22px;
    white-space: nowrap;
}

/* On phones the theme drops counters to line-height 1; keep text figures on the same 35px line as the number. */
@media only screen and (max-width: 767px) {
    .ob-account-counters .rbt-counterup .inner .content .counter.ob-counter-text {
        line-height: 35px;
    }
}

/* Keyboard focus. The theme removes every outline (a:focus, .rbt-btn, tab buttons) and hides
   checkboxes behind a drawn box, so keyboard users can't see where they are. :focus-visible
   shows the ring for keyboard use only; mouse clicks look exactly as in the theme. */
a:focus-visible,
button:focus-visible,
.rbt-btn:focus-visible,
.tab-button-style-2 li a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

input[type=checkbox]:focus-visible ~ label::before {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Brand logo: the logo mark beside the name as live text (header, mobile menu, footer); .logo in the selector outranks the theme's .logo a / .footer-style-1 .logo a display rules. */
.logo a.ob-brand {
    --ob-brand-green: #153C1F;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
}

/* Brand logo mark: fixed height, width from the image ratio; lifts the theme's 50px img cap so the footer size can be larger. */
.logo a.ob-brand .ob-brand-mark {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 48px;
    max-height: none;
    object-fit: contain;
}

/* Brand logo text block: name above tagline. */
.logo a.ob-brand .ob-brand-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-primary);
    line-height: 1.15;
}

/* Brand logo name: bold, in the logo's dark green. */
.logo a.ob-brand .ob-brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ob-brand-green);
}

/* Brand logo tagline ("Dikkat Merkezi"): small, in the same green as the name, as in her logo. */
.logo a.ob-brand .ob-brand-tagline {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ob-brand-green);
}

/* Brand logo, mobile menu size: a step smaller to leave room for the close button. */
.logo a.ob-brand.ob-brand--sm {
    gap: 8px;
}

/* Brand logo mark, mobile menu size. */
.logo a.ob-brand.ob-brand--sm .ob-brand-mark {
    height: 40px;
}

/* Brand logo name, mobile menu size. */
.logo a.ob-brand.ob-brand--sm .ob-brand-name {
    font-size: 16px;
}

/* Brand logo tagline, mobile menu size. */
.logo a.ob-brand.ob-brand--sm .ob-brand-tagline {
    font-size: 11px;
}

/* Brand logo, footer size: larger than in the header. */
.logo a.ob-brand.ob-brand--lg {
    gap: 14px;
}

/* Brand logo mark, footer size. */
.logo a.ob-brand.ob-brand--lg .ob-brand-mark {
    height: 64px;
}

/* Brand logo name, footer size. */
.logo a.ob-brand.ob-brand--lg .ob-brand-name {
    font-size: 22px;
}

/* Brand logo tagline, footer size. */
.logo a.ob-brand.ob-brand--lg .ob-brand-tagline {
    font-size: 14px;
}

/* Header brand logo on small desktops (1200-1399px): the main menu is visible there too, so the logo gives up a little width. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .rbt-header .logo a.ob-brand .ob-brand-mark {
        height: 44px;
    }
    /* The name goes onto two lines here, freeing the width the four-item menu needs. */
    .rbt-header .logo a.ob-brand .ob-brand-name {
        width: min-content;
        white-space: normal;
        font-size: 16px;
        line-height: 1.1;
    }
    .rbt-header .logo a.ob-brand .ob-brand-tagline {
        font-size: 11px;
    }
}

/* Header brand logo below 768px: the theme gives the header's left side only 40% of the row there, so the logo shrinks. */
@media only screen and (max-width: 767px) {
    .rbt-header .logo a.ob-brand {
        gap: 8px;
    }
    .rbt-header .logo a.ob-brand .ob-brand-mark {
        height: 42px;
    }
    .rbt-header .logo a.ob-brand .ob-brand-name {
        font-size: 16px;
    }
    .rbt-header .logo a.ob-brand .ob-brand-tagline {
        font-size: 11px;
    }
}

/* Header brand logo on the narrowest phones: the name breaks onto two lines and the tagline is hidden, so the logo fits next to the category, search, cart, account and menu buttons. */
@media only screen and (max-width: 479px) {
    .rbt-header .logo a.ob-brand .ob-brand-mark {
        height: 38px;
    }
    .rbt-header .logo a.ob-brand .ob-brand-name {
        width: min-content;
        white-space: normal;
        font-size: 15px;
        line-height: 1.1;
    }
    .rbt-header .logo a.ob-brand .ob-brand-tagline {
        display: none;
    }
}

/* Home about block: crops her square photo to the theme's 400x490 portrait image-1 slot and keeps both her and the portrait beside her in frame */
.about-style-1 .thumbnail-wrapper .thumbnail.image-1 img.ob-about-photo {
    width: 400px;
    height: auto;
    aspect-ratio: 400 / 490;
    object-fit: cover;
    object-position: 80% 50%;
}

/* Home about block on phones: the theme stacks the slot at full width, so the whole square photo is shown instead of a tall crop */
@media only screen and (max-width: 767px) {
    .about-style-1 .thumbnail-wrapper .thumbnail.image-1 img.ob-about-photo {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-position: 50% 50%;
    }
}

/* About page: her photo is square with an Atatürk portrait on its right half, so the tall main collage slot is narrowed to frame her alone instead of cutting the portrait in two. */
.about-style-1 .thumbnail-wrapper .thumbnail.image-1 img.ob-about-page-photo {
    width: auto;
    height: 490px;
    aspect-ratio: 11 / 20;
    object-fit: cover;
    object-position: left center;
}

/* About page, phones: the collage shrinks to this one full-width image, so the whole photo, portrait included, is shown. */
@media only screen and (max-width: 767px) {
    .about-style-1 .thumbnail-wrapper .thumbnail.image-1 img.ob-about-page-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-position: center;
    }
}

/* About page, expertise block: the centre's logo sits in the theme's single image slot, kept narrower than the column so the bold lettering does not outweigh the text. */
.ob-about-logo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
}

/* About page, contact band: the theme colours every link like a heading; on the gradient band the links stay white like the rest of the list. */
.ob-contact-list a,
.ob-contact-list a:hover,
.ob-contact-list a:focus {
    color: var(--color-white);
}

/* About page, contact band: on hover, contact links show an underline because their colour does not change. */
.ob-contact-list a:hover,
.ob-contact-list a:focus {
    text-decoration: underline;
}

/* Header: a menu label or header button must never break across lines — "Ana Sayfa" split
   in two would be drawn on the bar's top and bottom edges. A long signed-in first name is
   cut short instead. */
.rbt-header .mainmenu-nav .mainmenu > li > a,
.rbt-header .rbt-btn-wrapper .rbt-btn span {
    white-space: nowrap;
}

.rbt-header .quick-access > li.account-access > a {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* About page, tablets: the narrowed photo would leave room for image-3 on the same row, and
   the theme's offsets would then lift it into the banner. Keep image-1 alone on its row, as
   the theme's wider image does. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-style-1 .thumbnail-wrapper .thumbnail.image-1.ob-about-page-slot {
        flex: 0 0 100%;
    }
}

/* Feature icons: the theme colours the glyph only for primary/pink/coral/secondary circles;
   on the violet one it would stay white on pale lavender. */
.rbt-feature .icon.bg-violet-opacity i {
    color: var(--color-violet);
}