/* ==========================================================================
   XPLICATION SUPPORT — Design System v1.0
   IT Ticketing Platform · suport.xplication.ro
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --xp-dark-900: #0f172a;
  --xp-dark-800: #1e293b;
  --xp-dark-700: #334155;
  --xp-dark-600: #475569;

  /* Accent — "The X Factor" */
  --xp-accent: #0ea5e9;
  --xp-accent-hover: #0284c7;
  --xp-accent-light: #e0f2fe;
  --xp-accent-ultra-light: #f0f9ff;

  /* Neutrals */
  --xp-text: #0f172a;
  --xp-text-muted: #64748b;
  --xp-text-light: #94a3b8;
  --xp-border: #e2e8f0;
  --xp-border-light: #f1f5f9;
  --xp-surface: #f8fafc;
  --xp-white: #ffffff;

  /* Status — Ticket States */
  --xp-status-open: #3b82f6;
  --xp-status-open-bg: #eff6ff;
  --xp-status-progress: #8b5cf6;
  --xp-status-progress-bg: #f5f3ff;
  --xp-status-resolved: #22c55e;
  --xp-status-resolved-bg: #f0fdf4;
  --xp-status-urgent: #ef4444;
  --xp-status-urgent-bg: #fef2f2;

  /* Shadows */
  --xp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --xp-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08);
  --xp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --xp-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.06);

  /* Radii */
  --xp-radius-sm: 6px;
  --xp-radius: 8px;
  --xp-radius-md: 10px;
  --xp-radius-lg: 16px;
  --xp-radius-xl: 24px;

  /* Transitions */
  --xp-transition: 180ms ease-in-out;
  --xp-transition-slow: 300ms ease-in-out;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY REFINEMENTS
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.wp-block-template-part header .wp-block-group,
header .wp-block-group.alignfull {
  border-bottom: 1px solid var(--xp-border);
}

.wp-block-navigation .wp-block-navigation-item__content {
  transition: color var(--xp-transition);
  position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--xp-accent) !important;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--xp-accent) !important;
}

/* --------------------------------------------------------------------------
   4. BUTTONS — Global
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
  border-radius: var(--xp-radius) !important;
  padding: 0.75em 1.75em !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all var(--xp-transition) !important;
  box-shadow: var(--xp-shadow-sm);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--xp-shadow-md);
}

.wp-block-button__link:active,
.wp-element-button:active {
  transform: translateY(0);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--xp-accent) !important;
  color: var(--xp-accent) !important;
  background: transparent !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--xp-accent) !important;
  color: var(--xp-white) !important;
}

/* --------------------------------------------------------------------------
   5. CARDS & CONTAINERS
   -------------------------------------------------------------------------- */
.wp-block-column[style*="border"] {
  transition: all var(--xp-transition);
  box-shadow: var(--xp-shadow-sm);
}

.wp-block-column[style*="border"]:hover {
  box-shadow: var(--xp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--xp-accent) !important;
}

.wp-block-group.has-background {
  border-radius: var(--xp-radius-lg);
}

/* --------------------------------------------------------------------------
   6. FORMS & INPUTS — Global
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--xp-border) !important;
  border-radius: var(--xp-radius) !important;
  padding: 0.625rem 0.875rem !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  background: var(--xp-white) !important;
  color: var(--xp-text) !important;
  transition: border-color var(--xp-transition), box-shadow var(--xp-transition) !important;
  box-shadow: var(--xp-shadow-sm);
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--xp-accent) !important;
  box-shadow: 0 0 0 3px var(--xp-accent-light) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--xp-text-light) !important;
}

/* --------------------------------------------------------------------------
   7. FLUENT SUPPORT — Portal Container
   -------------------------------------------------------------------------- */
.fs_client_portal {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   8. FLUENT SUPPORT — Ticket List & Table
   -------------------------------------------------------------------------- */
.fs_tickets_container {
  background: var(--xp-white);
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-lg) !important;
  box-shadow: var(--xp-shadow);
  overflow: hidden;
}

.fs_tickets_header {
  background: var(--xp-surface) !important;
  border-bottom: 1px solid var(--xp-border) !important;
  padding: 1rem 1.25rem !important;
}

.fs_ticket_row,
.fs_tk_row {
  border-bottom: 1px solid var(--xp-border-light) !important;
  transition: background-color var(--xp-transition) !important;
  padding: 0.875rem 1.25rem !important;
}

.fs_ticket_row:hover,
.fs_tk_row:hover {
  background-color: var(--xp-accent-ultra-light) !important;
}

.fs_ticket_row:last-child,
.fs_tk_row:last-child {
  border-bottom: none !important;
}

.fs_ticket_subject,
.fs_tk_subject {
  font-weight: 600 !important;
  color: var(--xp-text) !important;
}

.fs_ticket_subject:hover,
.fs_tk_subject:hover {
  color: var(--xp-accent) !important;
}

/* --------------------------------------------------------------------------
   9. FLUENT SUPPORT — Status Badges
   -------------------------------------------------------------------------- */
.fs_status_badge {
  border-radius: 100px !important;
  padding: 0.25em 0.75em !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* --------------------------------------------------------------------------
   10. FLUENT SUPPORT — Ticket Form (Create Ticket)
   -------------------------------------------------------------------------- */
.fs_ticket_form_container,
.fs_create_ticket_container {
  background: var(--xp-white) !important;
  border: 1px solid var(--xp-border) !important;
  border-radius: var(--xp-radius-lg) !important;
  box-shadow: var(--xp-shadow) !important;
  padding: 2rem !important;
}

.fs_ticket_form .el-input__wrapper,
.fs_ticket_form .el-textarea__inner,
.fs_ticket_form .el-select .el-input__wrapper {
  border-radius: var(--xp-radius) !important;
  box-shadow: 0 0 0 1px var(--xp-border) !important;
  transition: box-shadow var(--xp-transition) !important;
}

.fs_ticket_form .el-input__wrapper:focus-within,
.fs_ticket_form .el-textarea__inner:focus,
.fs_ticket_form .el-select .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--xp-accent), 0 0 0 4px var(--xp-accent-light) !important;
}

.fs_input_label {
  font-weight: 600 !important;
  color: var(--xp-text) !important;
  margin-bottom: 0.375rem !important;
  font-size: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   11. FLUENT SUPPORT — Create Ticket Button
   -------------------------------------------------------------------------- */
.fs_create_ticket_btn,
.fs_create_ticket_button {
  background: var(--xp-accent) !important;
  color: var(--xp-white) !important;
  border: none !important;
  border-radius: var(--xp-radius) !important;
  padding: 0.625rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: all var(--xp-transition) !important;
  box-shadow: var(--xp-shadow-sm);
}

.fs_create_ticket_btn:hover,
.fs_create_ticket_button:hover {
  background: var(--xp-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--xp-shadow-md);
}

/* --------------------------------------------------------------------------
   12. FLUENT SUPPORT — Ticket Conversation Thread
   -------------------------------------------------------------------------- */
.fs_ticket_conversation,
.fs_ticket_thread_wrap {
  background: var(--xp-white) !important;
  border: 1px solid var(--xp-border) !important;
  border-radius: var(--xp-radius-lg) !important;
  box-shadow: var(--xp-shadow) !important;
  overflow: hidden;
}

.fs_ticket_header {
  background: var(--xp-surface) !important;
  border-bottom: 1px solid var(--xp-border) !important;
  padding: 1.25rem !important;
}

.fs_ticket_heading,
.fs_ticket_title {
  font-weight: 700 !important;
  color: var(--xp-text) !important;
  font-size: 1.25rem !important;
}

.fs_ticket_thread {
  padding: 1.25rem !important;
}

/* Agent vs Customer thread ribbons */
.fs_thread_ribbon_agent {
  border-left: 3px solid var(--xp-accent) !important;
  background: var(--xp-accent-ultra-light) !important;
  border-radius: 0 var(--xp-radius) var(--xp-radius) 0 !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

.fs_thread_ribbon_customer,
.fs_thread_ribbon_customer_cc {
  border-left: 3px solid var(--xp-border) !important;
  background: var(--xp-surface) !important;
  border-radius: 0 var(--xp-radius) var(--xp-radius) 0 !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

.fs_thread_name {
  font-weight: 600 !important;
  color: var(--xp-text) !important;
}

.fs_thread_body {
  color: var(--xp-dark-700) !important;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   13. FLUENT SUPPORT — Reply Box
   -------------------------------------------------------------------------- */
.fs_ticket_reply_box {
  border-top: 1px solid var(--xp-border) !important;
  background: var(--xp-surface) !important;
  padding: 1.25rem !important;
}

.fs_ticket_reply_box .el-textarea__inner {
  min-height: 120px !important;
  border: 1px solid var(--xp-border) !important;
  border-radius: var(--xp-radius) !important;
  font-family: inherit !important;
  line-height: 1.65 !important;
}

.fs_ticket_reply_box .el-textarea__inner:focus {
  border-color: var(--xp-accent) !important;
  box-shadow: 0 0 0 3px var(--xp-accent-light) !important;
}

/* --------------------------------------------------------------------------
   14. FLUENT SUPPORT — Ticket Meta & Details
   -------------------------------------------------------------------------- */
.fs_ticket_meta {
  color: var(--xp-text-muted) !important;
  font-size: 0.8125rem !important;
}

.fs_ticket_number {
  font-family: "SF Mono", "Fira Code", monospace !important;
  color: var(--xp-text-muted) !important;
  font-size: 0.8125rem !important;
}

.fs_ticket_details_label {
  font-weight: 600 !important;
  color: var(--xp-text-muted) !important;
  text-transform: uppercase !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   15. FLUENT SUPPORT — Filters & Actions
   -------------------------------------------------------------------------- */
.fs_filters_section,
.fs_filter_container {
  background: var(--xp-surface) !important;
  border-radius: var(--xp-radius) !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--xp-border-light) !important;
}

.fs_ticket_actions_btn,
.fs_actions_dropdown_btn {
  border-radius: var(--xp-radius) !important;
  transition: all var(--xp-transition) !important;
}

.fs_ticket_actions_btn:hover,
.fs_actions_dropdown_btn:hover {
  background: var(--xp-accent-ultra-light) !important;
  color: var(--xp-accent) !important;
}

/* --------------------------------------------------------------------------
   16. FLUENT SUPPORT — Close / Reopen Ticket
   -------------------------------------------------------------------------- */
.fs_close_ticket {
  border-radius: var(--xp-radius) !important;
  font-weight: 600 !important;
  transition: all var(--xp-transition) !important;
}

.fs_ticket_reopen {
  background: var(--xp-accent) !important;
  color: var(--xp-white) !important;
  border-radius: var(--xp-radius) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   17. FLUENT SUPPORT — Ticket Alert & Closed State
   -------------------------------------------------------------------------- */
.fs_ticket_alert,
.fs_ticket_closed_alert {
  border-radius: var(--xp-radius) !important;
  border: 1px solid var(--xp-status-resolved) !important;
  background: var(--xp-status-resolved-bg) !important;
  color: var(--xp-status-resolved) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   18. FLUENT SUPPORT — Upload & Attachments
   -------------------------------------------------------------------------- */
.fs_upload_button {
  border: 2px dashed var(--xp-border) !important;
  border-radius: var(--xp-radius) !important;
  color: var(--xp-text-muted) !important;
  transition: all var(--xp-transition) !important;
  background: var(--xp-surface) !important;
}

.fs_upload_button:hover {
  border-color: var(--xp-accent) !important;
  color: var(--xp-accent) !important;
  background: var(--xp-accent-ultra-light) !important;
}

/* --------------------------------------------------------------------------
   19. FLUENT SUPPORT — Dropdown Menus
   -------------------------------------------------------------------------- */
.fs_dropdown_menu {
  border: 1px solid var(--xp-border) !important;
  border-radius: var(--xp-radius) !important;
  box-shadow: var(--xp-shadow-lg) !important;
  background: var(--xp-white) !important;
  overflow: hidden;
}

.fs_dropdown_item {
  transition: background-color var(--xp-transition) !important;
  padding: 0.5rem 1rem !important;
}

.fs_dropdown_item:hover {
  background: var(--xp-accent-ultra-light) !important;
  color: var(--xp-accent) !important;
}

/* --------------------------------------------------------------------------
   20. FLUENT SUPPORT — Back Button & Navigation
   -------------------------------------------------------------------------- */
.fs_back_btn,
.fs_back_button,
.fs_back_nav {
  color: var(--xp-text-muted) !important;
  font-weight: 500 !important;
  transition: color var(--xp-transition) !important;
}

.fs_back_btn:hover,
.fs_back_button:hover,
.fs_back_nav:hover {
  color: var(--xp-accent) !important;
}

/* --------------------------------------------------------------------------
   21. FLUENT SUPPORT — Logout Button
   -------------------------------------------------------------------------- */
.fs_btn_logout,
.fs_logout_button {
  color: var(--xp-text-muted) !important;
  font-size: 0.8125rem !important;
  transition: color var(--xp-transition) !important;
}

.fs_btn_logout:hover,
.fs_logout_button:hover {
  color: var(--xp-status-urgent) !important;
}

/* --------------------------------------------------------------------------
   22. ELEMENT-PLUS OVERRIDES (Fluent Support uses Element Plus)
   -------------------------------------------------------------------------- */
.fs_client_portal .el-button--primary {
  background-color: var(--xp-accent) !important;
  border-color: var(--xp-accent) !important;
  border-radius: var(--xp-radius) !important;
  font-weight: 600 !important;
  transition: all var(--xp-transition) !important;
}

.fs_client_portal .el-button--primary:hover {
  background-color: var(--xp-accent-hover) !important;
  border-color: var(--xp-accent-hover) !important;
}

.fs_client_portal .el-button {
  border-radius: var(--xp-radius) !important;
  font-weight: 500 !important;
}

.fs_client_portal .el-input__wrapper {
  border-radius: var(--xp-radius) !important;
}

.fs_client_portal .el-tag {
  border-radius: 100px !important;
  font-weight: 600 !important;
}

.fs_client_portal .el-pagination {
  font-weight: 500 !important;
}

.fs_client_portal .el-pagination .btn-next,
.fs_client_portal .el-pagination .btn-prev,
.fs_client_portal .el-pager li {
  border-radius: var(--xp-radius-sm) !important;
}

.fs_client_portal .el-pager li.is-active {
  background: var(--xp-accent) !important;
  color: var(--xp-white) !important;
}

/* --------------------------------------------------------------------------
   23. HERO SECTION ENHANCEMENTS
   -------------------------------------------------------------------------- */
.wp-block-group[style*="background-color:#1e293b"],
.wp-block-group.has-accent-3-background-color {
  position: relative;
  overflow: hidden;
}

.wp-block-group[style*="background-color:#1e293b"]::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */
footer .wp-block-group,
.wp-block-template-part:last-child .wp-block-group {
  border-top: 1px solid var(--xp-border);
}

/* --------------------------------------------------------------------------
   25. SCROLLBAR (Webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--xp-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--xp-text-light);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--xp-text-muted);
}

/* --------------------------------------------------------------------------
   26. SELECTION
   -------------------------------------------------------------------------- */
::selection {
  background: var(--xp-accent-light);
  color: var(--xp-dark-900);
}

/* --------------------------------------------------------------------------
   27. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .fs_ticket_form_container,
  .fs_create_ticket_container {
    padding: 1.25rem !important;
  }

  .fs_ticket_row,
  .fs_tk_row {
    padding: 0.75rem 1rem !important;
  }

  .fs_thread_ribbon_agent,
  .fs_thread_ribbon_customer {
    padding: 0.75rem 1rem !important;
  }
}

/* --------------------------------------------------------------------------
   28. RESPONSIVE — MOBILE ENHANCEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  /* Hero section — reduce padding on mobile */
  .wp-block-group[style*="background-color:#0f172a"] {
    padding: 60px 20px !important;
  }

  /* Hero logo — smaller on mobile */
  .wp-block-group[style*="background-color:#0f172a"] .wp-block-image img {
    width: 160px !important;
  }

  /* CTA buttons — full width on mobile */
  .wp-block-group[style*="background-color:#0f172a"] .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  .wp-block-group[style*="background-color:#0f172a"] .wp-block-button {
    width: 100% !important;
    max-width: 320px;
  }

  .wp-block-group[style*="background-color:#0f172a"] .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
  }

  /* Service cards — adjust spacing when stacked */
  .wp-block-columns .wp-block-column[style*="border"] {
    margin-bottom: 16px !important;
  }

  /* CTA bottom section — reduce padding */
  .wp-block-group[style*="background-color:#f8fafc"] {
    padding: 40px 20px !important;
  }

  /* Spacers — reduce on mobile */
  .wp-block-spacer[style*="height:80px"] {
    height: 48px !important;
  }

  .wp-block-spacer[style*="height:60px"] {
    height: 36px !important;
  }

  /* Footer — stack layout */
  footer .wp-block-group.alignfull,
  .wp-block-template-part:last-child .wp-block-group.alignfull {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Footer logo */
  footer .wp-block-image img,
  .wp-block-template-part:last-child .wp-block-image img {
    width: 140px !important;
  }

  /* Header logo */
  .wp-block-template-part:first-child .custom-logo {
    max-width: 140px !important;
    height: auto !important;
  }

  /* Fluent Support portal — tighter on mobile */
  .fs_client_portal {
    padding: 0 !important;
  }

  .fs_tickets_container {
    border-radius: var(--xp-radius) !important;
  }

  .fs_ticket_conversation,
  .fs_ticket_thread_wrap {
    border-radius: var(--xp-radius) !important;
  }

  .fs_ticket_heading,
  .fs_ticket_title {
    font-size: 1.0625rem !important;
  }

  .fs_ticket_reply_box .el-textarea__inner {
    min-height: 100px !important;
  }
}

@media (max-width: 480px) {
  /* Very small screens */
  .wp-block-group[style*="background-color:#0f172a"] {
    padding: 48px 16px !important;
  }

  .wp-block-group[style*="background-color:#0f172a"] .wp-block-image img {
    width: 140px !important;
  }

  .wp-block-group[style*="background-color:#f8fafc"] {
    padding: 32px 16px !important;
  }

  .wp-block-column[style*="border"] {
    padding: 24px 20px !important;
  }

  .fs_ticket_row,
  .fs_tk_row {
    padding: 0.625rem 0.75rem !important;
  }
}

/* --------------------------------------------------------------------------
   29. OVERFLOW & TEXT FIX
   -------------------------------------------------------------------------- */
.wp-block-group.alignfull {
  overflow-x: hidden;
}

.wp-block-group[style*="background-color:#0f172a"] h1 {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  .wp-block-group[style*="background-color:#0f172a"] h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .wp-block-group[style*="background-color:#0f172a"] p {
    font-size: 0.9375rem !important;
  }
}

/* --------------------------------------------------------------------------
   30. FULL-WIDTH SECTION FIXES
   -------------------------------------------------------------------------- */
.wp-block-group.alignfull.has-background {
  border-radius: 0 !important;
}

body {
  overflow-x: hidden;
}

main.wp-block-group {
  overflow-x: hidden;
}

@media (max-width: 782px) {
  .wp-block-group.alignfull[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .wp-block-group.alignfull h1.wp-block-heading {
    font-size: clamp(1.375rem, 6.5vw, 2rem) !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .wp-block-group.alignfull .wp-block-heading.has-text-align-center {
    padding: 0 4px;
  }
}

@media (max-width: 480px) {
  .wp-block-group.alignfull[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .wp-block-group.alignfull h1.wp-block-heading {
    font-size: 1.375rem !important;
  }
}

/* --------------------------------------------------------------------------
   31. AGGRESSIVE MOBILE OVERFLOW FIX
   -------------------------------------------------------------------------- */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

.wp-block-group.alignfull {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

.wp-block-group.alignfull > * {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 782px) {
  .wp-block-group.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .wp-block-post-content > .wp-block-group.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   32. 100VW SCROLLBAR FIX (Standard WordPress alignfull fix)
   -------------------------------------------------------------------------- */
.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-post-content.alignfull {
  width: 100% !important;
}

.is-layout-flow > .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
}