/*
 * Custom frontend overrides on top of the Weiboo template (main.css).
 * Keep template-specific tweaks and Yii integration fixes here.
 */

/* Yii ActiveForm validation error styling to match the template. */
.has-error .form-control,
.has-error .nice-select {
    border-color: #dc3545;
}

.has-error .help-block {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

.help-block-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

/* Flash messages spacing. */
.shop-flash {
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------- Header */

/* Sticky navbar must be fully opaque — the template ships it at 0.9. */
.navbar-sticky.sticky-menu {
    background: #fff !important;
}

/* Below 991px the template hides the desktop menu and shows the hamburger.
   Trim the vertical padding down from 22px to 15px so the mobile header sits
   tighter, and give the logo a smaller footprint. */
@media (max-width: 991px) {
    .navbar-part1 {
        padding: 15px 0 !important;
    }
    .navbar-part1 .left-side .logo img {
        max-width: 80%;
        height: auto;
    }
}

/* The template hides the action items (search + cart) entirely below 500px.
   With the smaller mobile logo they still fit — keep them visible so the
   cart and search icons stay reachable on small screens. */
@media (max-width: 500px) {
    .navbar-part1 .header-action-items1 {
        display: flex !important;
    }
}

/* Below 768px, tighten container gutters, shrink the logo one more step and
   keep the account icon visible between search and cart (template hides it
   at this breakpoint). Icon spacing halved so all three fit on a phone. */
@media (max-width: 768px) {
    .navbar-sticky .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .navbar-part1 .left-side .logo img {
        max-width: 70%;
    }
    .navbar-part1 .header-action-items1 .account {
        display: block !important;
        margin-right: 10px;
    }
    .navbar-part1 .header-action-items .search-part {
        margin-right: 10px;
    }
}

/* Shop dropdown (category list) — with many categories the panel would
   overflow the viewport. Cap the height at ~70% of the viewport and let it
   scroll inside; keep it usable on mobile too (below 991px the template
   collapses to the .side-mobile-menu, which already scrolls as a whole). */
.nav__menu .has-dropdown .dropdown-ul {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.nav__menu .has-dropdown .dropdown-ul::-webkit-scrollbar {
    width: 8px;
}
.nav__menu .has-dropdown .dropdown-ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* ------------------------------------------------------------ Hero slider */

/* The template's .banner rule is `display: flex; align-items: center` which,
   with a single slide, lets the Swiper collapse to content width instead of
   filling the container. Force block layout so the swiper spans full-width
   regardless of slide count. */
.hero-slider {
    display: block !important;
    height: auto;
    margin-bottom: 0;
}

.hero-slider .banner-single.hero-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 520px;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
}

/* Overlay is baked into the inline background-image (linear-gradient stacked
   above the photo) — the template's ::before rules on .banner-single fight a
   pseudo-element overlay in ways we can't reliably win from here. */
.hero-slider .banner-single.hero-slide .container {
    position: relative;
}
.hero-slider .banner-single.hero-slide .single-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-slider .banner-single.hero-slide .contents {
    max-width: 720px;
    margin: 0 auto;
    color: #fff;
}
.hero-slider .banner-single.hero-slide .banner-heading {
    color: #fff;
    font-size: 52px;
    line-height: 1.15;
    margin-bottom: 18px;
}
.hero-slider .banner-single.hero-slide .hero-subtitle {
    color: #fff;
    font-size: 26px;
    line-height: 1.4;
    margin-bottom: 32px;
    background: transparent;
    padding: 0;
}

/* Solid red CTA with white text — darkens on hover. */
.hero-slider .banner-single.hero-slide .banner-action {
    display: flex;
    justify-content: center;
    margin: 0;
}
.hero-slider .banner-single.hero-slide .banner-btn.banner-btn2 {
    background: #EE403D;
    color: #fff;
    border: 1px solid #EE403D;
    padding: 10px 30px;
    border-radius: 7px;
    font-size: 15px;
    margin: 0;
    box-shadow: none;
    transition: all 300ms;
}
.hero-slider .banner-single.hero-slide .banner-btn.banner-btn2:hover {
    background: #d02f2c;
    border-color: #d02f2c;
    color: #fff;
}
.hero-slider .banner-single.hero-slide .banner-btn.banner-btn2 i,
.hero-slider .banner-single.hero-slide .banner-btn.banner-btn2:hover i {
    color: #fff;
    margin-right: 6px;
    margin-left: 0;
}

@media (max-width: 768px) {
    .hero-slider .banner-single.hero-slide {
        min-height: 320px;
    }
    .hero-slider .banner-single.hero-slide .banner-heading {
        font-size: 34px;
    }
    .hero-slider .banner-single.hero-slide .hero-subtitle {
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------- Footer */

/* Fully custom footer — deliberately not tagged `.footer` so the template's
   dark `.footer { background: #040404 }` doesn't apply. The DSP + NEUM SVGs
   are black-on-transparent, so we need a light background here. */
.site-footer {
    background: #f6f6f6;
    color: #333;
    border-top: 1px solid #e2e2e2;
}
.site-footer a {
    color: #333;
    text-decoration: none;
    transition: color 200ms;
}
.site-footer a:hover {
    color: #EE403D;
}

/* Top row: sponsor line, full-width band, centred. */
.site-footer__support {
    padding: 72px 0 22px;
    border-bottom: 1px solid #e2e2e2;
}
.site-footer__support-text {
    margin: 0;
    text-align: center;
    font-size: 27px;
    line-height: 1.3;
    color: #555;
}

/* Bottom row: three equal columns, vertically centred. */
.site-footer__main {
    padding: 40px 0;
}
.site-footer__logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 18px;
}
.site-footer__menu {
    margin: 0;
    padding: 0;
}
.site-footer__menu li {
    margin-bottom: 6px;
    font-size: 15px;
}
.site-footer__partner-logo {
    max-width: 100%;
    width: auto;
    height: auto;
}
.site-footer__partner-logo--dsp {
    max-height: 180px;
}
.site-footer__partner-logo--neum {
    max-height: 108px;
}
@media (max-width: 767px) {
    .site-footer__main .col-md-4 {
        margin-bottom: 24px;
    }
    .site-footer__main .col-md-4:last-child {
        margin-bottom: 0;
    }
    .site-footer__partner-logo--dsp {
        max-height: 140px;
    }
    .site-footer__partner-logo--neum {
        max-height: 84px;
    }
}

/* Bottom copyright strip. */
.site-footer__copyright {
    padding: 14px 0;
    border-top: 1px solid #e2e2e2;
    background: #efefef;
    font-size: 14px;
    color: #555;
}

/* Barion payment-provider logo: footer band above the copyright strip, and
   under the card-payment CTA on the order-complete page. */
.site-footer__barion {
    padding: 18px 0;
    border-top: 1px solid #e2e2e2;
}
.barion-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 60px;
}
.checkout-barion-logo {
    margin-top: 16px;
}

/* --------------------------------------------------------- Shop buttons */

/* Solid red primary CTA — reused by the hero, product-page and cart CTAs. */
.shop-btn-primary {
    display: inline-block;
    background: #EE403D;
    color: #fff;
    border: 1px solid #EE403D;
    border-radius: 7px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 200ms;
}
.shop-btn-primary:hover {
    background: #d02f2c;
    border-color: #d02f2c;
    color: #fff;
}
.shop-btn-primary:disabled,
.shop-btn-primary.disabled {
    opacity: 0.6;
    cursor: default;
}

/* White background, red outline + text — inverts to solid red on hover.
   Same look as the cart-sidebar "Proceed to checkout" outline button. */
.shop-btn-outline {
    display: inline-block;
    background: #fff;
    color: #EE403D;
    border: 1px solid #EE403D;
    border-radius: 7px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 200ms;
}
.shop-btn-outline:hover {
    background: #EE403D;
    color: #fff;
}

/* ------------------------------------------------------ Shop listing */

.shop-filters .shop-filters__submit,
.shop-filters .shop-filters__reset {
    border-radius: 7px;
    padding: 10px 16px;
    font-weight: 600;
    transition: all 200ms;
    border: 1px solid transparent;
}
.shop-filters .shop-filters__submit {
    background: #EE403D;
    color: #fff;
    border-color: #EE403D;
}
.shop-filters .shop-filters__submit:hover {
    background: #d02f2c;
    border-color: #d02f2c;
    color: #fff;
}
.shop-filters .shop-filters__reset {
    background: #212529;
    color: #fff;
    border-color: #212529;
}
.shop-filters .shop-filters__reset:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.shop-result-count {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 28px;
}

/* Product card: center-align the whole bottom block and apply a light lift on
   hover (a bit less pronounced than the category tile). */
.product-list-grid .product-item .bottom-content,
.product-list-grid .product-item .bottom-content .action-wrap {
    text-align: center;
    justify-content: center;
}
.product-list-grid .product-item {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.product-list-grid .product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.shop-load-more {
    background: #EE403D;
    color: #fff;
    border: 1px solid #EE403D;
    border-radius: 7px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 15px;
    transition: all 200ms;
}
.shop-load-more:hover {
    background: #d02f2c;
    border-color: #d02f2c;
    color: #fff;
}
.shop-load-more:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Product count next to a sub-category filter checkbox. */
.shop-filters__count {
    color: #999;
    font-size: 13px;
}

/* ------------------------------------------------------ Category grid */

/* Roomier cells than Bootstrap's `g-4` gutter gives on its own: wider side
   padding and a deep bottom gap, so the tiles breathe on /termekek. Beats the
   `.row > *` gutter padding on specificity (shop.css loads after Bootstrap). */
.category-grid > [class*="col-"] {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.category-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.category-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #d9d9d9;
    color: inherit;
}
.category-tile__image {
    aspect-ratio: 4 / 3;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.category-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}
.category-tile:hover .category-tile__image img {
    transform: scale(1.02);
}
.category-tile__placeholder {
    font-size: 42px;
    color: #bbb;
}

/* Deliberately more emphatic than the product card `.product-name` (which is
   16px / weight 700 in the template) — categories are the top-level landing. */
.category-tile__name {
    margin: 0;
    padding: 16px 18px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #222;
    text-align: center;
}
@media (max-width: 576px) {
    .category-tile__name {
        font-size: 18px;
        padding: 12px 14px;
    }
}

/* ------------------------------------------------- Sub-page breadcrumbs */

/* Sub-page title (`.page-path .path-title`) at 60% of the template default
   (50px → 30px, mobile 38px → 23px). */
.page-path .breadcrumbs-inner .path-title {
    font-size: 30px;
}
@media (max-width: 400px) {
    .page-path .breadcrumbs-inner .path-title {
        font-size: 23px;
    }
}

/* Breathing room after the `>` chevron between "Home" and the current page. */
.page-path li .fa-angle-right {
    margin-left: 8px;
    margin-right: 15px;
}

/* "Home" is an icon, not a word — a deep trail (main > sub > product) has to
   fit on one line on small screens. Keep it link-grey (the template paints
   every `.page-path a i` red, which is meant for the chevrons). */
.page-path a.home-page-link i {
    color: inherit;
    margin-left: 0;
    font-size: 17px;
    position: relative;
    top: 1px;
}
.page-path a.home-page-link:hover i {
    color: #EE403D;
}

/* Trail can wrap instead of overflowing once it carries the full category path. */
.page-path ul {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* --------------------------------------------------------- Cart page */

#js-cart-page tbody tr {
    border-bottom: 1px solid #ececec;
}
/* Mirrors the Bootstrap thead separator below the header row. */
#js-cart-page tbody tr:last-child {
    border-bottom: 2px solid #212529;
}

/* Extra breathing room between the subtotal and the checkout CTA. */
.cart-footer-checkout .h5 {
    margin-bottom: 28px !important;
}

/* Extra breathing room between price and quantity, quantity and total. */
#js-cart-page .cart-qty-cell {
    padding-left: 24px;
    padding-right: 24px;
}

/* Quantity input + inline "update" button. */
.cart-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cart-qty-wrap .js-cart-qty {
    width: 68px;
}
.cart-qty-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f6f6f6;
    color: #444;
    cursor: pointer;
    transition: all 200ms;
}
.cart-qty-update:hover {
    background: #EE403D;
    border-color: #EE403D;
    color: #fff;
}
.cart-qty-update:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Mobile: two-row card layout. Row 1 = image (25%) + name (75%); row 2 =
   price + qty + total + remove, sized roughly by the space each needs. */
@media (max-width: 768px) {
    #js-cart-page thead { display: none; }
    #js-cart-page,
    #js-cart-page tbody,
    #js-cart-page tr,
    #js-cart-page td { display: block; width: auto; }
    #js-cart-page tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid #ececec;
    }
    #js-cart-page tbody td {
        border: none;
        padding: 4px 0;
    }
    /* Row 1 */
    #js-cart-page tbody td:nth-child(1) { flex: 0 0 25%; padding-right: 12px; }
    #js-cart-page tbody td:nth-child(2) { flex: 0 0 75%; padding-left: 0; text-align: left; }
    /* Row 2 */
    #js-cart-page tbody td:nth-child(3) { flex: 0 0 22%; text-align: left;  padding-top: 12px; }
    #js-cart-page tbody td:nth-child(4) { flex: 0 0 38%; text-align: center; padding: 12px 8px 0; }
    #js-cart-page tbody td:nth-child(5) { flex: 0 0 25%; text-align: right; padding-top: 12px; }
    #js-cart-page tbody td:nth-child(6) { flex: 0 0 15%; text-align: right; padding-top: 12px; }

    .js-cart-page-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .js-cart-page-footer .cart-footer-continue {
        text-align: left;
    }
    .js-cart-page-footer .cart-footer-checkout {
        margin-top: 50px;
        text-align: right;
    }
}

/* -------------------------------------------- Stacked modal (forgot pass) */

/* The "forgot password" modal opens ON TOP of the login modal (which stays
   open in the background). Default Bootstrap 5.0.1 doesn't bump z-index for
   nested modals, so pin it here above the base 1055 modal / 1050 backdrop. */
#forgotPassModal {
    z-index: 1080;
}
#forgotPassModal + .modal-backdrop,
.modal-backdrop.modal-backdrop-stacked {
    z-index: 1075;
}

/* A touch wider than the base login modal (default max-width 500px) so it
   visibly sits on top rather than blending into the same box. */
.forgot-pass-dialog {
    max-width: 560px;
}

/* When the forgot-pass modal is open, dim the login modal underneath so the
   layering is obvious. */
body.forgot-modal-open #loginModal .modal-content {
    filter: brightness(0.72);
    transition: filter 200ms;
}

/* ------------------------------------------------------ Account sidebar */

/* Independent drawer — not tagged .cart-bar so the template's cart JS
   doesn't reach in and open it. Same geometry as the cart drawer. */
.account-bar {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    transform: translateX(100%);
    transition: all 500ms ease;
    z-index: 100;
}
.account-bar.show {
    visibility: visible;
    transform: translateX(0);
}
.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E7E7E7;
}
.account-heading {
    font-size: 17px;
    font-weight: 500;
    color: #404040;
    margin: 0;
}
.account-close {
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: color 200ms;
}
.account-close:hover {
    color: #EE403D;
}
.account-body {
    flex: 1 1 auto;
    overflow-y: auto;
}
.account-bar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms;
}
body.account-bar-open .account-bar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.account-menu li {
    border-bottom: 1px solid #ececec;
}
.account-menu li:last-child {
    border-bottom: none;
}
.account-menu-link {
    display: block;
    width: 100%;
    padding: 14px 18px;
    color: #212529;
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    font-weight: 500;
    transition: background 200ms;
}
.account-menu-link:hover {
    background: #f6f6f6;
    color: #EE403D;
}
.account-menu-link--btn {
    cursor: pointer;
}

/* ------------------------------------------------------ Cart sidebar */

/* The template sets `.cart-bar { display:flex; flex-direction:column; height:100% }`
   with `.cart-bottom-area { margin-top:auto }`, but the middle .product-area
   has no `flex:1` or overflow — so a tall list pushes the checkout buttons
   off-screen. Make the list the scrollable region. `min-height:0` is required
   here or a flex child refuses to shrink below its content size. */
.cart-bar .product-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --------------------------------------------------------- Shop toast */

.shop-toast {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #22a06b;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    font-size: 15px;
    max-width: 360px;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}
.shop-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.shop-toast--error {
    background: #d02f2c;
}
.shop-toast__icon {
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .shop-toast {
        left: 16px;
        right: 16px;
        max-width: none;
        top: 80px;
    }
}

/* --------------------------------------------------- Home section titles */

/* Decorated section title used above each product/category strip on the
   home page. Two-tone accent lines (brand red left, brand green right)
   frame the label; the label itself is uppercase and slightly tracked. */
/* Decorated section title used above each product/category strip on the
   home page. Two-tone accent lines (brand red left, brand green right)
   frame the label; the label itself is uppercase and slightly tracked. */
.home-section-title {
    position: relative;
    text-align: center;
    padding: 40px 0;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.home-section-title::before,
.home-section-title::after {
    content: '';
    flex: 0 0 80px;
    height: 3px;
    border-radius: 2px;
}
.home-section-title::before {
    background: #FB0403;
}
.home-section-title::after {
    background: #059238;
}

@media (max-width: 576px) {
    .home-section-title {
        font-size: 20px;
        gap: 10px;
        padding: 32px 0;
    }
    .home-section-title::before,
    .home-section-title::after {
        flex-basis: 40px;
    }
}

/* --------------------------------------------------- Product detail image */

/* Fixed-ratio frame around the main product image so swapping the visible
   image via the thumbnail row doesn't reflow the page. The image is fit
   inside with object-fit:contain — nothing is cropped, only centred. */
.product-image-frame {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}
.product-image-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --------------------------------------------------------- Contact page */

.contact-details dt { font-weight: 500; }
.contact-map-card .card-body { display: flex; }
.contact-map-embed,
.contact-map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

/* ---------------------------------------------------- Sticky header slide */

/* The template defines `@keyframes slideDown` TWICE — the second one (used by
   the preloader) runs -0% → -135%, i.e. away UPWARD. Because the sticky navbar
   also references `slideDown`, it inherited that meaning and slid off screen
   just as it appeared. Redefine under a private name and re-bind. */
@keyframes shop-sticky-slide-in {
    0%   { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
.sticky-menu,
.sticky-menu-mobile {
    animation: shop-sticky-slide-in 350ms ease-out both;
}
/* ------------------------------------------------- Rich text / content pages */

/* Admin-authored HTML (category and product descriptions, the legal pages).
   The template styles none of this, and the legal pages lean on headings,
   lists and tables, so give those a readable baseline. */
.rich-text h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 12px;
}
.rich-text h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 24px 0 10px;
}
.rich-text h2:first-child,
.rich-text h3:first-child {
    margin-top: 0;
}
.rich-text p,
.rich-text li {
    line-height: 1.7;
}
.rich-text ul,
.rich-text ol {
    padding-left: 22px;
    margin-bottom: 16px;
}
.rich-text li {
    margin-bottom: 6px;
}

/* Tables can be wide (the békéltető testület list); let them scroll inside the
   page rather than stretching it. */
.rich-text table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}
/* The template's global reset (`td { padding: 30px 0 !important; }` in
   main.css) outranks a plain declaration no matter the selector specificity —
   only another !important rule can beat it. Matched here with one, sized for
   a text table instead of the layout tables the reset was written for. */
.rich-text th,
.rich-text td {
    border: 1px solid #e2e2e2;
    padding: 10px 10px !important;
    text-align: left;
    vertical-align: top;
}
.rich-text th {
    background: #f6f6f6;
    font-weight: 700;
}
.rich-text td:first-child {
    white-space: nowrap;
}
@media (max-width: 576px) {
    .rich-text td:first-child {
        white-space: normal;
    }
}

/* A standalone content page (ÁSZF, adatkezelési tájékoztató, impresszum, …)
   is a long, centred read. Side padding scales with the viewport instead of
   a fixed max-width, so the reading column stays proportional from phone to
   ultrawide — 5% just above mobile, up to 15% on very large screens. */
.content-page {
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}
@media (min-width: 576px) {
    .content-page {
        padding-left: 7%;
        padding-right: 7%;
    }
}
@media (min-width: 768px) {
    .content-page {
        padding-left: 9%;
        padding-right: 9%;
    }
}
@media (min-width: 992px) {
    .content-page {
        padding-left: 11%;
        padding-right: 11%;
    }
}
@media (min-width: 1200px) {
    .content-page {
        padding-left: 13%;
        padding-right: 13%;
    }
}
@media (min-width: 1400px) {
    .content-page {
        padding-left: 15%;
        padding-right: 15%;
    }
}