/* ============================================
   NP Booking - Mobile Responsive Layer
   Purpose: Cross-cutting mobile fixes for iOS & Android
   Does NOT change desktop design.
   Created: 2026-02-15
   ============================================ */

/* ── Global Mobile Foundations ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Use dynamic viewport height for Android Chrome address bar */
:root {
    --app-height: 100dvh;
}

/* iOS smooth scrolling on overflow containers */
.overflow-y-auto,
.overflow-x-auto,
.overflow-auto {
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile-Only Styles (max-width: 767px) ── */
@media (max-width: 767px) {

    /* ── Prevent horizontal overflow ── */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* ── Input zoom prevention (iOS Safari zooms on <16px inputs) ── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ── Touch targets: minimum 44x44px (Apple HIG) ── */
    button,
    a,
    [role="button"],
    [onclick],
    .btn,
    .nav-btn-outlined,
    .portal-pill,
    .social-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Links in text paragraphs are excluded from min-size */
    p a, li a, span a, td a, .text-xs a, .text-sm a {
        min-height: unset;
        min-width: unset;
    }

    /* ── Typography: ensure readability ── */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Prevent long words/URLs from breaking layout */
    h1, h2, h3, h4, h5, h6, p, li, td, th, a, span, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

    /* ── Images: always responsive ── */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ── Tables: horizontal scroll wrapper ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ── Modals: fit mobile screen ── */
    [x-show][class*="fixed"][class*="inset-0"] .bg-white,
    [x-show][class*="fixed"][class*="inset-0"] > div:not([class*="absolute"]) {
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Safe areas: iPhone notch & home indicator ── */
    .safe-area-top { padding-top: max(1rem, env(safe-area-inset-top)); }
    .safe-area-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .safe-area-left { padding-left: max(0px, env(safe-area-inset-left)); }
    .safe-area-right { padding-right: max(0px, env(safe-area-inset-right)); }

    /* ── Fixed bottom elements: respect safe area ── */
    .mobile-nav,
    .fixed-bottom-cta,
    [class*="fixed"][class*="bottom-0"] {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── Sticky top elements: respect safe area ── */
    nav[class*="sticky"][class*="top-0"],
    nav[class*="fixed"][class*="top-0"] {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* ── Touch feedback for interactive elements ── */
    button:active,
    a:active,
    [role="button"]:active,
    [onclick]:active {
        opacity: 0.85;
        transition: opacity 0.1s;
    }

    /* ── Forms: better mobile experience ── */
    input, select, textarea {
        border-radius: 12px;
        appearance: none;
        -webkit-appearance: none;
    }

    /* Prevent iOS keyboard from pushing fixed elements */
    body.keyboard-open .mobile-nav,
    body.keyboard-open .fixed-bottom-cta {
        display: none !important;
    }

    /* ── Hero sections: use dvh for proper mobile height ── */
    .min-h-screen {
        min-height: 100dvh;
    }

    /* ── Footer: above bottom nav ── */
    footer {
        margin-bottom: 64px;
    }

    /* ── Main content: space for bottom nav ── */
    main {
        padding-bottom: 80px;
    }

    /* ── Pricing cards: stack properly on mobile ── */
    .pricing-card {
        margin-bottom: 1rem;
    }
    .pricing-card:hover,
    .pricing-card.featured:hover {
        transform: none !important; /* Disable hover lift on touch devices */
    }

    /* ── FAQ accordion: larger touch targets ── */
    .space-y-4 button[class*="w-full"] {
        padding: 16px !important;
        min-height: 56px;
    }

    /* ── Cards: disable hover transforms on touch ── */
    .feature-card:hover,
    .venue-card:hover,
    .card-modern:hover,
    .business-card:hover,
    .category-card:hover,
    .review-card:hover,
    .token-card:hover,
    .trust-stat-card:hover {
        transform: none !important;
    }

    /* ── Search bar sticky: fix z-index on mobile ── */
    .sticky.top-16 {
        top: 64px; /* Match nav height */
    }

    /* ── Smooth scroll for anchor links ── */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px; /* Account for sticky nav */
    }

    /* ── Cookie banner: fit mobile ── */
    [class*="cookie"],
    .cookie-banner {
        left: 8px !important;
        right: 8px !important;
        bottom: 72px !important; /* Above bottom nav */
        max-width: calc(100vw - 16px) !important;
        border-radius: 16px !important;
    }
}

/* ── Medium screens (tablets) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Ensure tables still scroll on tablets */
    table {
        display: block;
        overflow-x: auto;
    }
}

/* ── iOS-specific fixes ── */
@supports (-webkit-touch-callout: none) {
    /* Fix 100vh on iOS Safari (address bar issue) */
    .h-screen, .min-h-screen {
        height: 100dvh;
        min-height: 100dvh;
    }

    /* Prevent rubber-band overscroll on fixed containers */
    body {
        overscroll-behavior-y: none;
    }

    /* Smooth momentum scrolling */
    .overflow-y-auto, .overflow-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Sticky Bottom CTA for Business Profile (Rezervă acum) ── */
@media (max-width: 767px) {
    .mobile-sticky-cta {
        position: fixed;
        bottom: 64px; /* Above bottom nav */
        left: 0;
        right: 0;
        z-index: 45;
        background: white;
        border-top: 1px solid rgba(0,0,0,0.08);
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transform: translateY(0);
        transition: transform 0.3s ease;
    }

    .mobile-sticky-cta.hidden-cta {
        transform: translateY(100%);
    }

    .mobile-sticky-cta .cta-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-sticky-cta .cta-info .cta-name {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-sticky-cta .cta-info .cta-rating {
        font-size: 12px;
        color: #64748b;
    }

    .mobile-sticky-cta .cta-button {
        flex-shrink: 0;
        background: #0f172a;
        color: white;
        font-weight: 700;
        font-size: 15px;
        padding: 14px 28px;
        border-radius: 14px;
        border: none;
        cursor: pointer;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s;
    }

    .mobile-sticky-cta .cta-button:active {
        background: #1e293b;
    }

    /* When sticky CTA is visible, add extra bottom padding */
    body.has-sticky-cta main {
        padding-bottom: 160px;
    }
    body.has-sticky-cta footer {
        margin-bottom: 128px;
    }
}

/* ── Print: hide mobile-only elements ── */
@media print {
    .mobile-nav,
    .mobile-sticky-cta,
    .fixed-bottom-cta {
        display: none !important;
    }
}

/* ── Keyboard detection helper (JS sets this class) ── */
@media (max-width: 767px) {
    body.keyboard-open {
        /* When virtual keyboard is open, hide bottom nav */
    }
    body.keyboard-open .mobile-nav {
        display: none !important;
    }
    body.keyboard-open .mobile-sticky-cta {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   AUTH PAGES — Login, Register, Staff Login, Business Register
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Auth: social login buttons full width stacked ── */
    .social-btn {
        min-height: 48px;
    }

    /* ── Auth: portal pill switcher ── */
    .portal-pill {
        padding: 10px 16px;
        font-size: 12px;
        min-height: 44px;
    }

    /* ── Auth: form card padding ── */
    .bg-white.rounded-2xl.shadow-sm.border.border-gray-100 {
        padding: 20px !important;
    }

    /* ── Auth: title sizing ── */
    h1.text-3xl {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    /* ── Auth: nav height fix ── */
    nav .h-\[72px\] {
        height: 64px;
    }
    section.pt-\[72px\] {
        padding-top: 64px;
    }

    /* ── Auth: forgot password modal ── */
    .fixed.inset-0[x-show="showForgotModal"] .bg-white.rounded-2xl {
        margin: 16px;
        max-width: calc(100vw - 32px);
    }

    /* ── Auth: submit button touch target ── */
    .btn-primary {
        min-height: 48px;
        font-size: 15px;
    }

    /* ── Auth: password toggle button ── */
    button[type="button"][class*="absolute"][class*="right-"] {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    /* ── Auth: remember me + forgot password row ── */
    .flex.items-center.justify-between label,
    .flex.items-center.justify-between button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ── Auth: checkbox touch target ── */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    /* ── Auth: error messages visible ── */
    .bg-red-50.border.border-red-200,
    .bg-emerald-50.border.border-emerald-200 {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════
   BUSINESS REGISTER — Multi-step form
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Progress steps: smaller on mobile ── */
    .w-9.h-9.rounded-xl {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* ── Plan cards: full width ── */
    .plan-card {
        padding: 14px;
    }
    .plan-card .text-xl {
        font-size: 1.125rem;
    }

    /* ── Billing toggle buttons ── */
    .inline-flex.bg-white.rounded-lg button {
        min-height: 36px;
        padding: 6px 12px;
    }

    /* ── Referral section: better stacking ── */
    .bg-gradient-to-r.from-indigo-50 .flex.gap-2 {
        flex-direction: column;
    }
    .bg-gradient-to-r.from-indigo-50 .flex.gap-2 button {
        width: 100%;
    }

    /* ── Terms modal: full screen on mobile ── */
    .fixed.inset-0 .bg-white.rounded-2xl {
        margin: 8px;
        max-height: calc(100dvh - 16px);
    }
}

/* ══════════════════════════════════════════════════
   BUSINESS PACKAGES — Pricing page
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Pricing cards: full width single column ── */
    .pricing-card {
        width: 100%;
    }
    .pricing-card .text-5xl {
        font-size: 2.5rem;
    }

    /* ── Hero section: reduce padding ── */
    .hero-gradient {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .hero-gradient h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    /* ── Stats row: smaller ── */
    .grid.grid-cols-3 .text-2xl {
        font-size: 1.25rem;
    }

    /* ── Feature cards: reduce padding ── */
    .feature-card {
        padding: 20px;
    }
    .feature-card h3 {
        font-size: 1.1rem;
    }

    /* ── Trust badges: stack ── */
    .flex.flex-wrap.items-center.justify-center.gap-8 {
        gap: 12px;
    }

    /* ── Comparison table: scroll ── */
    .comparison-row {
        font-size: 13px;
    }

    /* ── CTA buttons: full width stacked ── */
    .flex.flex-col.sm\:flex-row.gap-4 a {
        width: 100%;
        text-align: center;
        justify-content: center;
        min-height: 48px;
    }
}

/* ══════════════════════════════════════════════════
   SEARCH RESULTS
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Search: force single column cards ── */
    .polish-stagger,
    #resultsScroll .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Search: card image aspect ratio ── */
    .polish-card .aspect-\[16\/10\] {
        aspect-ratio: 16/9;
    }

    /* ── Search: service list touch targets ── */
    .polish-card span[class*="flex items-center justify-between"] {
        min-height: 44px;
        padding: 10px 8px;
    }

    /* ── Search: top bar inputs ── */
    .sticky.top-16 input,
    .sticky.top-16 select,
    .sticky.top-16 button {
        min-height: 44px;
    }

    /* ── Search: full height minus nav ── */
    .flex-1.flex.overflow-hidden {
        height: calc(100dvh - 120px) !important;
    }

    /* ── Search: no results ── */
    .min-h-\[400px\] {
        min-height: 300px;
    }

    /* ── Search: filter chips horizontal scroll ── */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* ── Search: hide map on mobile by default ── */
    .flex-1.border-l.border-gray-200 {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   LEGAL PAGES — Privacy, Terms, Delete Account
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Legal: title section ── */
    .bg-white.rounded-2xl.shadow-lg h1,
    .bg-white.rounded-2xl.shadow-lg .text-4xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    /* ── Legal: section padding ── */
    .bg-white.rounded-xl.shadow-md {
        padding: 20px !important;
    }

    /* ── Legal: section headings ── */
    .bg-white.rounded-xl.shadow-md h2 {
        font-size: 1.25rem !important;
        flex-wrap: wrap;
    }

    /* ── Legal: icon + text flex items ── */
    .bg-white.rounded-xl.shadow-md .flex.items-start {
        gap: 12px;
    }

    /* ── Legal: header ── */
    header .h-16 {
        height: 56px;
    }
    header .text-2xl {
        font-size: 1.25rem;
    }

    /* ── Legal: footer links ── */
    footer .space-x-6 {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    footer .space-x-6 > * {
        margin-left: 0 !important;
    }

    /* ── Legal: info boxes ── */
    .border.rounded-lg.p-6 {
        padding: 16px;
    }

    /* ── Legal: permission cards ── */
    .border.border-gray-200.rounded-lg.p-6 h3 {
        font-size: 0.9rem;
    }

    /* ── Legal: security grid ── */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── Legal: payment grid ── */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Legal: CTA gradient section ── */
    .bg-gradient-to-br.from-indigo-600 {
        padding: 24px !important;
        border-radius: 16px;
    }

    /* ── Legal: back-to-top button ── */
    a[href="#"] .inline-flex {
        min-height: 48px;
    }

    /* ── Legal: email template box ── */
    .bg-gray-50.p-4.rounded.font-mono {
        font-size: 12px;
        overflow-x: auto;
    }
}

/* ══════════════════════════════════════════════════
   STATIC PAGES — Contact, FAQ, Features, How It Works, etc.
   Pages using @extends('layouts.app')
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Pages: hero headers ── */
    .bg-gradient-to-br.from-slate-900 h1 {
        font-size: 1.5rem !important;
    }
    .bg-gradient-to-br.from-slate-900 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* ── Contact: form grid ── */
    .grid.md\:grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
    }

    /* ── Contact: form inputs ── */
    .lg\:col-span-2 input,
    .lg\:col-span-2 select,
    .lg\:col-span-2 textarea {
        min-height: 48px;
        font-size: 16px;
    }

    /* ── Contact: submit button ── */
    .bg-gradient-to-r.from-emerald-500 {
        min-height: 52px;
        font-size: 16px;
    }

    /* ── FAQ: accordion buttons ── */
    button[class*="w-full"][class*="px-4"][class*="py-3"] {
        min-height: 52px;
        padding: 14px 16px !important;
    }

    /* ── FAQ: category pills ── */
    .flex.flex-wrap.gap-2 a[class*="rounded-full"] {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Features: grid ── */
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── How it works: step line ── */
    .step-line {
        left: 24px;
    }

    /* ── Pricing: card grid ── */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── Prose content: readable ── */
    .prose {
        font-size: 15px;
        line-height: 1.7;
    }
    .prose h2 {
        font-size: 1.3rem;
        margin-top: 2rem;
    }
    .prose ul, .prose ol {
        padding-left: 1.25rem;
    }
    .prose table {
        display: block;
        overflow-x: auto;
        font-size: 13px;
    }

    /* ── Terms: tab buttons ── */
    .bg-white.rounded-xl.shadow-sm.border .flex.gap-2 button {
        font-size: 13px;
        padding: 10px 12px;
        min-height: 44px;
    }

    /* ── Contract: summary cards ── */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    .grid.grid-cols-2.md\:grid-cols-4 p.text-sm {
        font-size: 12px;
    }

    /* ── Download/Referral page: full-width CTAs ── */
    .flex.flex-col.md\:flex-row a,
    .flex.flex-col.md\:flex-row button {
        width: 100%;
        min-height: 52px;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════
   STAFF PAGES — Login, Dashboard, Calendar
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Staff login: same as client auth ── */

    /* ── Staff: mobile menu items ── */
    .sm\:hidden .flex.flex-col.gap-2 a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Staff success page: features grid ── */
    .grid.grid-cols-1.md\:grid-cols-3.gap-4 {
        grid-template-columns: 1fr !important;
    }

    /* ── Staff success: action buttons ── */
    .flex.flex-col.md\:flex-row.gap-4 a {
        min-height: 52px;
    }
}

/* ══════════════════════════════════════════════════
   RESET PASSWORD — Standalone page
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Reset: form container ── */
    .min-h-\[calc\(100vh-4rem\)\] {
        flex-direction: column;
        min-height: auto;
    }
    .min-h-\[calc\(100vh-4rem\)\] > .flex-1:first-child {
        padding: 24px 16px;
    }

    /* ── Reset: title ── */
    .min-h-\[calc\(100vh-4rem\)\] h1 {
        font-size: 1.5rem;
    }

    /* ── Reset: inputs full width ── */
    .min-h-\[calc\(100vh-4rem\)\] input {
        min-height: 48px;
    }

    /* ── Reset: submit button ── */
    .min-h-\[calc\(100vh-4rem\)\] button[type="submit"] {
        min-height: 48px;
    }
}

/* ══════════════════════════════════════════════════
   VERIFY EMAIL — Uses layouts.app
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Verify: card padding ── */
    .bg-white.rounded-2xl.shadow-xl {
        padding: 24px !important;
    }

    /* ── Verify: icon ── */
    .w-20.h-20.bg-blue-100 {
        width: 64px;
        height: 64px;
    }
    .w-20.h-20.bg-blue-100 svg {
        width: 32px;
        height: 32px;
    }

    /* ── Verify: steps list ── */
    .bg-gradient-to-r.from-blue-50 ol {
        font-size: 14px;
    }

    /* ── Verify: resend button ── */
    .bg-slate-900.hover\:bg-slate-800.text-white.font-semibold {
        min-height: 48px;
    }
}

/* ── Landscape phone orientation ── */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce padding in landscape */
    nav[class*="sticky"] .h-16,
    nav[class*="fixed"] .h-\\[72px\\] {
        height: 48px !important;
    }

    .mobile-nav {
        height: 48px !important;
    }

    .mobile-nav-item i {
        font-size: 16px !important;
    }

    .mobile-nav-item span {
        font-size: 9px !important;
    }
}

/* ══════════════════════════════════════════════════
   BOOKING FLOW — Mobile optimizations
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Booking: step indicators compact ── */
    .step-item > div {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* ── Booking: sticky header compact ── */
    .gradient-bg.sticky {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* ── Booking: service items proper spacing ── */
    .service-item {
        padding: 12px !important;
    }

    /* ── Booking: time slots grid 3 columns ── */
    .time-slot {
        padding: 10px 6px;
        font-size: 13px;
    }

    /* ── Booking: date buttons compact ── */
    .date-btn {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* ── Booking: staff avatars proper size ── */
    .staff-item img,
    .staff-select-avatar-btn img {
        width: 48px;
        height: 48px;
        object-fit: cover;
    }

    /* ── Booking: confirmation button full width ── */
    button[type="submit"],
    .btn-premium,
    a.btn-premium {
        width: 100%;
        justify-content: center;
        min-height: 52px;
    }
}

/* ══════════════════════════════════════════════════
   BUSINESS PROFILE — Mobile polish
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Profile: staff card avatars ── */
    .staff-card img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 50%;
    }

    /* ── Profile: business logo proper sizing ── */
    .mobile-logo {
        width: 64px !important;
        height: 64px !important;
        object-fit: cover;
        border-radius: 16px;
    }

    /* ── Profile: service cards full width ── */
    .service-card {
        padding: 14px !important;
    }

    /* ── Profile: tabs scrollable ── */
    .tab-active,
    [class*="tab-"] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Profile: gallery images proper aspect ── */
    .mobile-scroll-x img {
        border-radius: 12px;
        object-fit: cover;
    }

    /* ── Profile: review cards ── */
    .review-card,
    [class*="review"] .bg-white {
        padding: 14px !important;
    }
}