/* Shared responsive hardening for public, admin, client, auth, and document screens. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 900px) {
  .admin-body, .client-body { padding: 1rem !important; }
  .admin-topbar, .client-header { padding: .8rem 1rem !important; }
  .admin-topbar { align-items: stretch !important; }
  .topbar-right, .header-user-meta { width: 100%; overflow-x: auto; padding-bottom: .2rem; }
  .topbar-right > *, .header-user-meta > * { flex: 0 0 auto; }
  .panel-header, .portal-card-header { align-items: flex-start !important; gap: .8rem !important; }
  .panel-header { flex-direction: column; }
  .panel-header > .btn, .panel-header > a, .panel-header > button { width: 100%; justify-content: center; }
  .admin-body [style*="grid-template-columns: 300px 1fr 320px"] { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .admin-body [style*="grid-template-columns: 1.2fr 0.8fr"],
  .admin-body [style*="grid-template-columns:1.2fr 0.8fr"] { grid-template-columns: 1fr !important; }
  .admin-body .form-grid, .client-body .form-grid { grid-template-columns: 1fr !important; }
  .admin-modal { padding: .75rem !important; align-items: flex-start !important; }
  .admin-modal-card { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 1.5rem) !important; margin: 0 !important; }
  .admin-modal-body { padding: 1rem !important; overflow-y: auto; }
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
  table { min-width: 680px; }
  th, td { white-space: normal; vertical-align: top; }
}

@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  .container { width: min(calc(100% - 1.5rem), var(--content-width, 1280px)) !important; }
  main > section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  main > section:first-child { padding-top: 2.5rem !important; }
  main h1, .hero-title { font-size: 2rem !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
  main h2, .section-title { font-size: 1.75rem !important; line-height: 1.3 !important; }
  main h3 { overflow-wrap: anywhere; }
  main p { overflow-wrap: anywhere; }
  .top-info-bar { display: none !important; }
  .site-header .container { min-height: 68px; gap: .5rem; }
  .site-header .brand-logo { min-width: 0; }
  .site-header .logo-name { font-size: 1rem !important; }
  .site-header .logo-sub { font-size: .58rem !important; }
  .site-header .header-actions > a { display: none !important; }
  .mobile-menu-btn { min-width: 44px; min-height: 44px; }
  .mobile-drawer { width: min(88vw, 360px) !important; }
  .drawer-nav-link { min-height: 46px; }
  .btn { min-height: 42px; white-space: normal; text-align: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  input, select, textarea, .form-control { font-size: 16px !important; min-height: 44px; }
  textarea, textarea.form-control { min-height: 110px; }
  /* 2 Cards Inline on Mobile Rule for Plans, SMM, Services, Work, and Client Portals */
  .ref-pricing-matrix-grid,
  .pricing-grid,
  .smm-panel-grid,
  .smm-grid,
  .smm-cards-grid,
  .services-catalog-grid,
  .services-board,
  .portfolio-grid,
  #portfolioGrid,
  .saved-video-grid,
  .websites-grid,
  .quota-grid,
  .deliverables-grid,
  .cards-2col-mobile,
  .cards-grid-2col-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  .ref-pricing-card,
  .smm-card,
  .smm-platform-card,
  .service-card-item,
  .pricing-card,
  .studio-note.service-note,
  .portfolio-card,
  .portfolio-item,
  .saved-video-card,
  .website-showcase-card,
  .quota-card,
  .deliv-card {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 768px) {
    .studio-note.service-note {
      padding: 0.85rem 0.75rem !important;
      border-radius: 14px !important;
    }
    .studio-note.service-note h3 {
      font-size: 0.95rem !important;
      line-height: 1.25 !important;
    }
    .studio-note.service-note .studio-description {
      display: none !important;
    }
    .studio-note.service-note .studio-tagline {
      font-size: 0.72rem !important;
      line-height: 1.35 !important;
      margin-bottom: 0.5rem !important;
    }
    .portfolio-card {
      border-radius: 12px !important;
    }
    .portfolio-info {
      padding: 0.6rem 0.65rem !important;
    }
    .portfolio-title {
      font-size: 0.88rem !important;
      line-height: 1.25 !important;
    }
  }

  @media (max-width: 768px) {
    /* 1. SMM Platform Cards Fixes (Icon + Badge + Button Layout) */
    .smm-platform-card {
      padding: 0.85rem 0.75rem !important;
      border-radius: 14px !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .smm-card-top-row {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 0.55rem !important;
      gap: 0.4rem !important;
      width: 100% !important;
    }
    .smm-badge-tag {
      position: static !important;
      margin: 0 !important;
      font-size: 0.58rem !important;
      padding: 0.18rem 0.45rem !important;
      border-radius: 999px !important;
      max-width: 60% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.25rem !important;
      box-shadow: none !important;
      flex-shrink: 1 !important;
    }
    .smm-platform-icon-wrap {
      width: 36px !important;
      height: 36px !important;
      font-size: 1.1rem !important;
      border-radius: 10px !important;
      margin-bottom: 0 !important;
      display: inline-flex !important;
      flex-shrink: 0 !important;
    }
    .smm-card-platform {
      font-size: 0.95rem !important;
      line-height: 1.25 !important;
      margin-bottom: 0.15rem !important;
    }
    .smm-card-headline {
      font-size: 0.74rem !important;
      line-height: 1.25 !important;
      margin-bottom: 0.2rem !important;
    }
    .smm-card-tagline {
      font-size: 0.68rem !important;
      line-height: 1.3 !important;
      margin-bottom: 0.55rem !important;
    }
    .smm-price-block {
      padding: 0.45rem 0.6rem !important;
      margin-bottom: 0.65rem !important;
      border-radius: 10px !important;
    }
    .smm-price-block .price-prefix {
      font-size: 0.6rem !important;
      margin-bottom: 0.1rem !important;
    }
    .smm-price-block .price-main {
      font-size: 1.2rem !important;
      line-height: 1.1 !important;
    }
    .smm-feature-list {
      display: none !important;
    }

    /* Fix Buttons Clipping & Stacking */
    .smm-card-footer {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.35rem !important;
      width: 100% !important;
    }
    .smm-card-footer .btn,
    .smm-card-footer .smm-order-btn,
    .smm-card-footer .smm-wa-btn {
      width: 100% !important;
      min-height: 34px !important;
      padding: 0.35rem 0.45rem !important;
      font-size: 0.74rem !important;
      font-weight: 800 !important;
      border-radius: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.35rem !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    /* 2. Web Plans & Tools Cards Mobile Fixes */
    .tools-podium-grid,
    .web-plans-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.65rem !important;
    }
    .tool-podium-card,
    .web-plan-card {
      padding: 0.85rem 0.75rem !important;
      border-radius: 14px !important;
      min-width: 0 !important;
    }
    .web-plan-ribbon {
      position: static !important;
      display: inline-flex !important;
      align-self: flex-start !important;
      font-size: 0.55rem !important;
      padding: 0.15rem 0.45rem !important;
      margin-bottom: 0.4rem !important;
      border-radius: 999px !important;
      max-width: 100% !important;
    }
    .tool-icon-squircle {
      width: 36px !important;
      height: 36px !important;
      font-size: 1.05rem !important;
      border-radius: 10px !important;
      margin-bottom: 0.45rem !important;
    }
    .tool-card-title,
    .web-plan-name {
      font-size: 0.92rem !important;
      margin-bottom: 0.2rem !important;
      line-height: 1.25 !important;
    }
    .tool-card-tagline {
      font-size: 0.68rem !important;
      margin-bottom: 0.45rem !important;
    }
    .tool-price-tag,
    .web-plan-price {
      font-size: 1.15rem !important;
      padding: 0.35rem 0.55rem !important;
      margin-bottom: 0.55rem !important;
    }
    .tool-mini-features,
    .web-plan-features {
      display: none !important;
    }
    .tool-action-row,
    .web-plan-footer {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.35rem !important;
      width: 100% !important;
    }
    .tool-action-row .btn,
    .web-plan-footer .btn {
      width: 100% !important;
      min-height: 34px !important;
      font-size: 0.74rem !important;
      padding: 0.35rem 0.45rem !important;
      border-radius: 8px !important;
      margin: 0 !important;
    }

    /* 3. Pricing Matrix Mobile Ribbons & Icons */
    .ref-pricing-card {
      padding: 0.85rem 0.75rem !important;
      border-radius: 14px !important;
    }
    .ref-card-header-row {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 0.55rem !important;
      gap: 0.4rem !important;
      width: 100% !important;
    }
    .ref-card-ribbon {
      position: static !important;
      font-size: 0.55rem !important;
      padding: 0.15rem 0.4rem !important;
      max-width: 60% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      flex-shrink: 1 !important;
    }
    .ref-card-top-icon {
      width: 36px !important;
      height: 36px !important;
      font-size: 1rem !important;
      margin-bottom: 0 !important;
      border-radius: 10px !important;
      flex-shrink: 0 !important;
    }
    .ref-card-title {
      font-size: 0.92rem !important;
      margin-bottom: 0.2rem !important;
    }
    .ref-card-price {
      font-size: 1.15rem !important;
    }
    .ref-card-period {
      font-size: 0.68rem !important;
    }

    /* 4. Video & Work Cards in 2-Col Mobile */
    .video-card,
    .portfolio-item,
    .multi-poster-card,
    .saved-video-card,
    .website-showcase-card {
      padding: 0.65rem !important;
      border-radius: 14px !important;
      min-width: 0 !important;
    }
    .multi-poster-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.45rem !important;
      margin: 0.55rem 0 0.75rem !important;
    }
    .poster-tile {
      border-radius: 9px !important;
      aspect-ratio: 1 / 1.15 !important;
    }
    .campaign-meta-row {
      gap: 0.35rem !important;
      margin-bottom: 0.45rem !important;
    }
    .campaign-company-badge,
    .campaign-event-badge,
    .campaign-count-pill {
      font-size: 0.62rem !important;
      padding: 0.15rem 0.45rem !important;
    }
    .video-thumb-wrap,
    .portfolio-item div[style*="height: 260px"],
    .portfolio-item div[style*="height:260px"] {
      height: 125px !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }
    .video-play-btn,
    .saved-video-play {
      width: 34px !important;
      height: 34px !important;
      font-size: 0.85rem !important;
    }
    .video-duration-badge,
    .saved-video-duration {
      font-size: 0.6rem !important;
      padding: 2px 6px !important;
    }
    .portfolio-item div[style*="padding: 1.4rem"],
    .video-card div[style*="padding: 1.4rem"],
    .saved-video-details,
    .website-details-wrap {
      padding: 0.7rem 0.5rem !important;
    }
    .portfolio-item h3,
    .video-card h3,
    .saved-video-details h3,
    .website-card-title {
      font-size: 0.88rem !important;
      line-height: 1.25 !important;
      margin-bottom: 0.25rem !important;
    }
    .video-card p,
    .portfolio-item p,
    .saved-video-details p:not(.saved-video-client),
    .website-card-desc {
      display: none !important;
    }
    .portfolio-item div[style*="display: flex; gap: 0.6rem"],
    .video-card div[style*="display: flex; gap: 0.6rem"],
    .website-actions-row {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.35rem !important;
      width: 100% !important;
      padding-top: 0.45rem !important;
      border-top: none !important;
    }
    .portfolio-item div[style*="display: flex; gap: 0.6rem"] .btn,
    .video-card div[style*="display: flex; gap: 0.6rem"] .btn,
    .website-actions-row .btn {
      width: 100% !important;
      min-height: 32px !important;
      font-size: 0.72rem !important;
      padding: 0.3rem 0.45rem !important;
      border-radius: 8px !important;
      justify-content: center !important;
      margin: 0 !important;
    }

    /* 5. Client Portal Quota & Deliverables Cards in 2-Col Mobile */
    .quota-card {
      padding: 0.75rem 0.65rem !important;
      border-radius: 12px !important;
      gap: 0.55rem !important;
    }
    .quota-icon {
      width: 34px !important;
      height: 34px !important;
      font-size: 0.95rem !important;
      border-radius: 10px !important;
    }
    .quota-info strong {
      font-size: 0.88rem !important;
    }
    .quota-info span {
      font-size: 0.65rem !important;
      line-height: 1.2 !important;
    }
    .deliv-card {
      border-radius: 12px !important;
    }
    .deliv-thumb {
      height: 105px !important;
    }
    .deliv-info {
      padding: 0.65rem 0.55rem !important;
    }
    .deliv-info h5 {
      font-size: 0.82rem !important;
      margin-bottom: 0.2rem !important;
    }
    .deliv-info small {
      font-size: 0.65rem !important;
      margin-bottom: 0.45rem !important;
    }
    .deliv-info .btn {
      min-height: 30px !important;
      font-size: 0.72rem !important;
      padding: 0.25rem 0.45rem !important;
      width: 100% !important;
    }
  }

  [style*="minmax(350px"], [style*="minmax(340px"], [style*="minmax(320px"],
  [style*="minmax(300px"], [style*="minmax(280px"], [style*="minmax(260px"],
  [style*="grid-template-columns: 2fr 1fr 2fr"], [style*="grid-template-columns:2fr 1fr 2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-column:1/-1"], [style*="grid-column: 1 / -1"] { min-width: 0; }
  .project-cards-grid, .portal-columns,
  .hero-stats-showcase, .transformation-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .pricing-card, .video-card, .proj-card, .portal-card, .panel-card { min-width: 0; padding: 1.15rem !important; }
  .pricing-card-ribbon { position: static !important; display: inline-flex; margin-bottom: .8rem; }
  .pricing-card-header { padding-right: 0 !important; }
  .plan-price { font-size: 1.8rem !important; }
  .hero-stats-showcase { gap: .8rem !important; }
  .hero-stat-card { padding: 1rem !important; }
  .floating-wa-btn { width: 52px !important; height: 52px !important; right: 14px !important; bottom: 14px !important; font-size: 1.55rem !important; }
  .site-footer { padding: 3rem 0 5rem !important; }
  .site-footer .container > div:first-child { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .site-footer .container > div:last-child { align-items: flex-start !important; flex-direction: column !important; }
  .site-footer .container > div:last-child > div:last-child { gap: .6rem !important; flex-wrap: wrap; }
  .modal-overlay { padding: .65rem !important; }
  .modal-overlay > div { max-height: calc(100dvh - 1.3rem); overflow-y: auto !important; border-radius: 8px !important; }
  .crop-ratio-btn { font-size: .7rem !important; }
  .login-container, .register-container, .install-container { width: 100% !important; }
  .auth-card, .register-card { padding: 1.35rem 1rem !important; border-radius: 8px !important; }
  .demo-btn-group { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .container { width: min(calc(100% - 1rem), var(--content-width, 1280px)) !important; }
  .admin-body, .client-body { padding: .65rem !important; }
  .panel-card, .portal-card, .pricing-card { padding: .9rem !important; border-radius: 6px !important; }
  .admin-topbar .topbar-title h2 { font-size: 1rem !important; }
  .brand-header { margin-bottom: 1.25rem !important; }
  .toolbar { padding: 0 .5rem; flex-wrap: wrap; }
  .toolbar .btn { flex: 1; }
  .ref-brand-sub { display: none !important; }
}

/* ==============================================================================
   Refined Mobile Floating Capsule Header (< 900px)
   ============================================================================== */
@media (max-width: 900px) {
  .ref-navbar-wrapper {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding: 0 0.65rem !important;
  }
  .ref-capsule-nav {
    width: 100% !important;
    max-width: min(calc(100% - 0.25rem), 540px) !important;
    height: 52px !important;
    padding: 0.35rem 0.55rem 0.35rem 0.65rem !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(14, 165, 233, 0.25) !important;
    box-shadow: 0 8px 25px -4px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(2, 132, 199, 0.08) !important;
    border-radius: 9999px !important;
  }
  .ref-capsule-nav .ref-capsule-link {
    display: none !important;
  }
  .ref-capsule-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    text-decoration: none !important;
  }
  .ref-capsule-brand .ref-capsule-emblem {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
  }
  .ref-capsule-brand-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .ref-brand-name {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #0b192e !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
  }
  .ref-brand-name .ref-verified-badge {
    color: #0284c7 !important;
    font-size: 0.72rem !important;
  }
  .ref-brand-sub {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .ref-capsule-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  .ref-capsule-actions .btn-sm,
  .ref-capsule-actions .ref-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.92rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .ref-capsule-actions .btn-outline {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08) !important;
  }
  .ref-capsule-actions .btn-outline:active {
    transform: scale(0.92) !important;
    background: #e0f2fe !important;
  }
  .ref-capsule-actions .btn-whatsapp {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.35) !important;
  }
  .ref-capsule-actions .btn-whatsapp:active {
    transform: scale(0.92) !important;
  }
  .ref-capsule-mobile-toggle {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b192e !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(11, 25, 46, 0.2) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }
  .ref-capsule-mobile-toggle:active {
    transform: scale(0.92) !important;
    background: #0284c7 !important;
  }
}