/*
 * Socle responsive transversal GPro Ma Carte Virtuelle.
 * Toutes les règles restent limitées aux surfaces du plugin.
 */

:where(
  .gpro-mcv-client-wrap,
  #gpro-mcv-guest-simulator,
  .gpro-mcv-v3-portal,
  .gpro-mcv-v3-app,
  .gpro-mcv-v3-commercial,
  .gpro-mcv-v3r,
  .gpro-mcv-v3-signup-wrap,
  .gpro-mcv-activation-wrap,
  .gpro-mcv-public,
  .gpro-mcv-admin-builder-page
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

:where(
  .gpro-mcv-client-wrap,
  #gpro-mcv-guest-simulator,
  .gpro-mcv-v3-portal,
  .gpro-mcv-v3-app,
  .gpro-mcv-v3-commercial,
  .gpro-mcv-v3r,
  .gpro-mcv-v3-signup-wrap,
  .gpro-mcv-activation-wrap,
  .gpro-mcv-admin-builder-page
) :where(form, fieldset, section, article, div, label) {
  min-inline-size: 0;
}

:where(
  .gpro-mcv-client-wrap,
  #gpro-mcv-guest-simulator,
  .gpro-mcv-v3-portal,
  .gpro-mcv-v3-app,
  .gpro-mcv-v3-commercial,
  .gpro-mcv-v3r,
  .gpro-mcv-v3-signup-wrap,
  .gpro-mcv-activation-wrap
) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-inline-size: 100%;
  box-sizing: border-box;
}

:where(
  .gpro-mcv-client-wrap,
  #gpro-mcv-guest-simulator,
  .gpro-mcv-v3-portal,
  .gpro-mcv-v3-app,
  .gpro-mcv-v3-commercial,
  .gpro-mcv-v3r,
  .gpro-mcv-v3-signup-wrap,
  .gpro-mcv-activation-wrap
) :where(h1, h2, h3, h4, h5, h6, p, li, td, th, strong, small, span, a, button) {
  overflow-wrap: anywhere;
}

.gpro-mcv-responsive-table {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.wrap[class*="gpro-mcv"] .widefat,
.gpro-mcv-admin-builder-page .widefat,
.gpro-mcv-v3-commercial .widefat {
  max-inline-size: 100%;
}

body[class*="_page_gpro-mcv"] .wrap,
body[class*="toplevel_page_gpro-mcv"] .wrap {
  max-inline-size: 100%;
  box-sizing: border-box;
}

body[class*="_page_gpro-mcv"] :where(input, select, textarea),
body[class*="toplevel_page_gpro-mcv"] :where(input, select, textarea) {
  max-inline-size: 100%;
  box-sizing: border-box;
}

@media (max-width: 782px) {
  body[class*="_page_gpro-mcv"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  body[class*="toplevel_page_gpro-mcv"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-inline-size: 0 !important;
    inline-size: 100%;
    font-size: 16px;
  }
}

body[class*="_page_gpro-mcv"] .widefat,
body[class*="toplevel_page_gpro-mcv"] .widefat {
  max-inline-size: 100%;
}

.gpro-mcv-v3c-table,
.gpro-mcv-v3r-table {
  max-inline-size: 100%;
}

@media (max-width: 1180px) {
  #gpro-mcv-guest-simulator.gpro-mcv-simulator--organization-branding .gpro-mcv-edit-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  }

  .gpro-mcv-admin-editor-shell {
    min-inline-size: 0;
  }
}

@media (max-width: 900px) {
  .gpro-mcv-v3-portal-grid,
  .gpro-mcv-v3-brand-editor,
  .gpro-mcv-v3c-grid,
  .gpro-mcv-v3r-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gpro-mcv-v3p-modal-simulator > div[role="dialog"] {
    inline-size: 100% !important;
    block-size: 100dvh !important;
    max-block-size: 100dvh !important;
  }

  .gpro-mcv-v3-simulator-frame-wrap iframe {
    min-block-size: 0 !important;
    block-size: 100% !important;
  }
}

@media (max-width: 782px) {
  :where(
    .gpro-mcv-client-wrap,
    #gpro-mcv-guest-simulator,
    .gpro-mcv-v3-portal,
    .gpro-mcv-v3-signup-wrap,
    .gpro-mcv-activation-wrap
  ) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }

  #gpro-mcv-guest-simulator.gpro-mcv-simulator--organization-branding .gpro-mcv-edit-grid,
  #gpro-mcv-guest-simulator .gpro-mcv-edit-grid,
  #gpro-mcv-guest-simulator .gpro-mcv-sim-acc-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-sim-summary-line,
  #gpro-mcv-guest-simulator .gpro-mcv-sim-summary-total {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-sim-price-pair {
    min-inline-size: 0 !important;
    inline-size: 100%;
    text-align: start !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-option-head {
    flex-wrap: wrap;
  }

  .gpro-mcv-client-wrap {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .gpro-mcv-client-wrap > .gpro-mcv-client-page-hero {
    margin: -12px -12px 14px !important;
    padding: 20px 18px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .gpro-mcv-client-page-hero h2,
  .gpro-mcv-v3-portal-hero h2,
  .gpro-mcv-v3r-hero h2,
  .gpro-mcv-v3-signup-head h1 {
    font-size: clamp(23px, 8vw, 28px) !important;
  }

  .gpro-mcv-create-modal-card,
  .gpro-mcv-editor-modal-card {
    inline-size: 100% !important;
    max-inline-size: none !important;
    block-size: 100dvh !important;
    max-block-size: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 12px !important;
    overscroll-behavior: contain;
  }

  .gpro-mcv-crm-modal-card {
    max-block-size: calc(100dvh - 16px) !important;
  }

  .gpro-mcv-modal-card {
    max-block-size: calc(100dvh - 16px) !important;
    overscroll-behavior: contain;
  }

  .gpro-mcv-modal-overlay {
    block-size: 100dvh;
  }

  .gpro-mcv-v3p-modal {
    padding: 8px !important;
  }

  .gpro-mcv-v3p-modal > div[role="dialog"],
  .gpro-mcv-v3-modal-dialog {
    max-block-size: calc(100dvh - 16px) !important;
    overscroll-behavior: contain;
  }

  .gpro-mcv-v3p-modal-actions,
  .gpro-mcv-v3-modal-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .gpro-mcv-v3p-modal-actions > *,
  .gpro-mcv-v3-modal-actions > * {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .gpro-mcv-v3-portal-list article form {
    min-inline-size: 0;
    flex-wrap: wrap;
  }

  .gpro-mcv-v3-portal-list article form :where(select, button, .button),
  .gpro-mcv-v3-card-actions > * {
    flex: 1 1 100%;
    inline-size: 100%;
  }

  .gpro-mcv-v3-commercial,
  .gpro-mcv-v3-app {
    margin-inline-end: 10px !important;
  }

  body[class*="_page_gpro-mcv"] .wrap,
  body[class*="toplevel_page_gpro-mcv"] .wrap {
    margin-inline-end: 10px;
  }

  body[class*="_page_gpro-mcv"] .widefat,
  body[class*="toplevel_page_gpro-mcv"] .widefat {
    display: block;
    inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[class*="_page_gpro-mcv"] form[style*="grid-template-columns"],
  body[class*="toplevel_page_gpro-mcv"] form[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[class*="_page_gpro-mcv"] .tablenav,
  body[class*="toplevel_page_gpro-mcv"] .tablenav {
    block-size: auto;
  }

  body[class*="_page_gpro-mcv"] .tablenav :where(.alignleft, .alignright),
  body[class*="toplevel_page_gpro-mcv"] .tablenav :where(.alignleft, .alignright) {
    float: none;
    inline-size: 100%;
    margin: 0 0 8px;
  }

  .gpro-mcv-v3c-card,
  .gpro-mcv-v3r-card {
    padding: 14px !important;
    min-inline-size: 0;
  }

  .gpro-mcv-v3c-table,
  .gpro-mcv-v3c-table tbody,
  .gpro-mcv-v3c-table tr,
  .gpro-mcv-v3c-table td,
  .gpro-mcv-v3r-table,
  .gpro-mcv-v3r-table tbody,
  .gpro-mcv-v3r-table tr,
  .gpro-mcv-v3r-table td {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
  }

  .gpro-mcv-v3c-table thead,
  .gpro-mcv-v3r-table thead {
    display: none;
  }

  .gpro-mcv-v3c-table tr,
  .gpro-mcv-v3r-table tr {
    margin-block-end: 12px;
    padding: 8px;
    border: 1px solid #e1e5ec;
    border-radius: 12px;
    background: #fff;
  }

  .gpro-mcv-v3c-table td,
  .gpro-mcv-v3r-table td {
    padding: 8px !important;
    border-block-end: 1px dashed #e1e5ec !important;
    overflow-wrap: anywhere;
  }

  .gpro-mcv-v3c-table td:last-child,
  .gpro-mcv-v3r-table td:last-child {
    border-block-end: 0 !important;
  }

  .gpro-mcv-v3c-table td::before,
  .gpro-mcv-v3r-table td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gpro-mcv-v3c-table td[colspan]::before,
  .gpro-mcv-v3r-table td[colspan]::before {
    display: none;
  }

  .single-product form.cart .gpro-mcv-physical-product-box ~ .quantity,
  .single-product form.cart .gpro-mcv-physical-product-box ~ button.single_add_to_cart_button {
    inline-size: 100% !important;
    margin-inline-end: 0 !important;
    justify-content: center;
  }

  .single-product form.cart .gpro-mcv-physical-product-box ~ .quantity input {
    inline-size: 100%;
  }

  .gpro-mcv-physical-product-box [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gpro-mcv-activation-wrap {
    margin: 16px 10px !important;
    padding: 16px !important;
  }
}

@media (max-width: 600px) {
  .gpro-mcv-v3-signup-wrap {
    margin: 14px auto !important;
    padding-inline: 10px !important;
  }

  .gpro-mcv-v3-signup-head,
  .gpro-mcv-v3-signup-body,
  .gpro-invite header,
  .gpro-invite main,
  .gpro-invite footer {
    padding: 18px !important;
  }

  .gpro-invite .steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gpro-mcv-v3r-hero,
  .gpro-mcv-v3c-hero {
    padding: 20px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 420px) {
  .gpro-mcv-physical-grid,
  .gpro-mcv-support-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-sim-crop-controls label,
  .gpro-mcv-focus-sliders label {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-sim-crop-controls label > :first-child,
  .gpro-mcv-focus-sliders label > :first-child {
    grid-column: 1 / -1;
  }

  .gpro-mcv-v3-portal-kpis,
  .gpro-mcv-v3r-kpis,
  .gpro-mcv-v3-kpis {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gpro-mcv-v3-card-preview-head,
  .gpro-mcv-vcards-credit-bar,
  .gpro-mcv-vcards-modal-head {
    align-items: stretch !important;
    flex-direction: column;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .gpro-mcv-create-modal-card,
  .gpro-mcv-editor-modal-card,
  .gpro-mcv-modal-card,
  .gpro-mcv-v3p-modal > div[role="dialog"],
  .gpro-mcv-v3-modal-dialog,
  .share-modal-box,
  .qr-modal-box,
  .crm-modal-box {
    max-block-size: calc(100dvh - 12px) !important;
  }

  #gpro-mcv-guest-simulator .gpro-mcv-create-preview-shell {
    position: static !important;
    inline-size: min(320px, 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .gpro-mcv-client-wrap,
    #gpro-mcv-guest-simulator,
    .gpro-mcv-v3-portal,
    .gpro-mcv-v3-app,
    .gpro-mcv-v3r
  ) *,
  :where(
    .gpro-mcv-client-wrap,
    #gpro-mcv-guest-simulator,
    .gpro-mcv-v3-portal,
    .gpro-mcv-v3-app,
    .gpro-mcv-v3r
  ) *::before,
  :where(
    .gpro-mcv-client-wrap,
    #gpro-mcv-guest-simulator,
    .gpro-mcv-v3-portal,
    .gpro-mcv-v3-app,
    .gpro-mcv-v3r
  ) *::after {
    scroll-behavior: auto !important;
  }
}