/* VakantiesFrankrijk v10.1.22 — account layout recovery. */

/* -------------------------------------------------------------------------
   WooCommerce account shell: target only the outer account wrapper.
   v10.1.21 used a broad .woocommerce selector that could turn nested content
   into a 250px grid. These rules restore a deterministic outer grid and reset
   every nested WooCommerce block to normal flow.
   ------------------------------------------------------------------------- */
body.vf10122-account-layout .vf910-page-content{
  width:100%!important;
  min-width:0!important;
}
html body.vf10122-account-layout .vf910-page-content > .woocommerce{
  display:grid!important;
  grid-template-columns:250px minmax(0,1fr)!important;
  align-items:start!important;
  gap:24px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-navigation{
  display:block!important;
  grid-column:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:250px!important;
  float:none!important;
  margin:0!important;
}
html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-content{
  display:block!important;
  grid-column:2!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  float:none!important;
  margin:0!important;
  overflow:visible!important;
}

/* No-navigation variants use the complete available width. :has is supported
   by current Firefox/Chrome; the JS class is a fallback. */
html body.vf10122-account-layout.vf10122-account-no-nav .vf910-page-content > .woocommerce,
html body.vf10122-account-layout .vf910-page-content > .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)){
  display:block!important;
  grid-template-columns:minmax(0,1fr)!important;
}
html body.vf10122-account-layout.vf10122-account-no-nav .vf910-page-content > .woocommerce > .woocommerce-MyAccount-content,
html body.vf10122-account-layout .vf910-page-content > .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) > .woocommerce-MyAccount-content{
  display:block!important;
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Never let a nested WooCommerce component inherit the outer account grid. */
html body.vf10122-account-layout .woocommerce-MyAccount-content .woocommerce,
html body.vf10122-account-layout .woocommerce-MyAccount-content .woocommerce-notices-wrapper,
html body.vf10122-account-layout .woocommerce-MyAccount-content .woocommerce-info{
  display:block!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* -------------------------------------------------------------------------
   Invoices/payments endpoint: horizontal text, full-width cards and safe wrap.
   ------------------------------------------------------------------------- */
html body.vf10122-orders-route .vf10121-orders-panel,
html body.vf10122-orders-route .vf10121-orders-head,
html body.vf10122-orders-route .vf10121-orders-empty,
html body.vf10122-orders-route .vf10121-orders-list,
html body.vf10122-orders-route .vf10121-order-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}
html body.vf10122-orders-route .vf10121-orders-panel{
  display:block!important;
  padding:0!important;
}
html body.vf10122-orders-route .vf10121-orders-head h1{
  max-width:none!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
html body.vf10122-orders-route .vf10121-orders-empty{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
}
html body.vf10122-orders-route .vf10121-orders-empty > div,
html body.vf10122-orders-route .vf10121-orders-empty h2,
html body.vf10122-orders-route .vf10121-orders-empty p{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  writing-mode:horizontal-tb!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}
html body.vf10122-orders-route .vf10121-orders-empty > a{
  min-width:max-content!important;
  white-space:nowrap!important;
}

/* -------------------------------------------------------------------------
   Profile settings: server route + DOM detection, so styling no longer depends
   on one exact plugin class or on when the plugin inserts its form.
   ------------------------------------------------------------------------- */
body.vf10122-settings-page .vf900-share,
body.vf10122-settings-route .vf900-share{
  display:none!important;
}
html body.vf10122-settings-page .vf10122-settings-root,
html body.vf10122-settings-route .vf10122-settings-root{
  width:min(1180px,calc(100% - 48px))!important;
  max-width:1180px!important;
  margin:30px auto 72px!important;
  padding:30px!important;
  border:1px solid var(--vf-line,#eaded7)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(53,24,34,.08)!important;
}
html body.vf10122-settings-page .vf10122-settings-title,
html body.vf10122-settings-route .vf10122-settings-title{
  width:min(1180px,calc(100% - 48px))!important;
  max-width:1180px!important;
  margin:30px auto 0!important;
  padding:25px 30px!important;
  border:1px solid var(--vf-line,#eaded7)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fffdf9,#f8efe8)!important;
  color:var(--vf-wine-dark,#351822)!important;
  font-family:var(--vf-serif,Georgia,serif)!important;
  font-size:clamp(38px,4vw,54px)!important;
  font-weight:500!important;
  line-height:1!important;
  box-shadow:0 14px 34px rgba(53,24,34,.08)!important;
}
html body .vf10122-settings-form{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
html body .vf10122-settings-form .hp-form__fields,
html body .vf10122-settings-form > .hp-form__fields{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 22px!important;
}
html body .vf10122-settings-form :is(.hp-form__field,.hp-field,[class*="form__field"]){
  min-width:0!important;
  margin:0!important;
}
html body .vf10122-settings-form :is([class*="image"],[class*="avatar"],[class*="description"],[class*="profile_info"],[class*="profile-info"],[class*="email"]){
  grid-column:1 / -1!important;
}
html body .vf10122-settings-form :is(label,.hp-field__label){
  display:block!important;
  margin:0 0 7px!important;
  color:#351822!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.35!important;
}
html body .vf10122-settings-form :is(input[type="text"],input[type="email"],input[type="password"],input[type="file"],textarea,select){
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:11px 13px!important;
  border:1px solid #ddcfc6!important;
  border-radius:10px!important;
  background:#fffdfb!important;
  color:#2d2226!important;
  box-shadow:none!important;
}
html body .vf10122-settings-form textarea{
  min-height:155px!important;
  resize:vertical!important;
}
html body .vf10122-settings-form input[type="file"]{
  padding:7px!important;
}
html body .vf10122-settings-form input[type="file"]::file-selector-button{
  min-height:38px!important;
  margin-right:12px!important;
  padding:0 14px!important;
  border:1px solid #682340!important;
  border-radius:8px!important;
  background:#682340!important;
  color:#fff!important;
  font-weight:750!important;
  cursor:pointer!important;
}
html body .vf10122-settings-form :is(button,input[type="submit"],input[type="button"],.hp-form__button,.vf10120-image-button,.vf10120-settings-save){
  min-height:44px!important;
  padding:0 18px!important;
  border:1px solid #682340!important;
  border-radius:9px!important;
  background:#682340!important;
  background-image:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:12px!important;
  font-weight:750!important;
  text-shadow:none!important;
  box-shadow:0 8px 18px rgba(53,24,34,.14)!important;
}
html body .vf10122-settings-form :is(.vf10120-delete-account,[class*="delete-account"]){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:0 16px!important;
  border:1px solid rgba(143,45,58,.35)!important;
  border-radius:9px!important;
  background:#fff6f5!important;
  color:#8f2d3a!important;
  -webkit-text-fill-color:#8f2d3a!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
html body .vf10122-settings-form :is(.hp-form__footer,[class*="form__footer"]){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
}

/* -------------------------------------------------------------------------
   Tablet/mobile account and settings audit.
   ------------------------------------------------------------------------- */
@media(max-width:900px){
  html body.vf10122-account-layout .vf910-page-content > .woocommerce{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-navigation{
    grid-column:1!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    overflow:hidden!important;
  }
  html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-navigation ul{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    width:100%!important;
    overflow-x:auto!important;
    padding:0 0 4px!important;
  }
  html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-navigation li{
    flex:0 0 auto!important;
  }
  html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-navigation a{
    white-space:nowrap!important;
  }
  html body.vf10122-account-layout .vf910-page-content > .woocommerce > .woocommerce-MyAccount-content{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
  }
  html body.vf10122-orders-route .vf10121-orders-empty{
    grid-template-columns:46px minmax(0,1fr)!important;
  }
  html body.vf10122-orders-route .vf10121-orders-empty > a{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
  }
  html body .vf10122-settings-form .hp-form__fields,
  html body .vf10122-settings-form > .hp-form__fields{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media(max-width:620px){
  html body.vf10122-orders-route .vf10121-orders-empty{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    padding:18px!important;
  }
  html body.vf10122-orders-route .vf10121-orders-empty > span{
    width:42px!important;
    height:42px!important;
  }
  html body.vf10122-settings-page .vf10122-settings-root,
  html body.vf10122-settings-route .vf10122-settings-root{
    width:calc(100% - 16px)!important;
    margin:14px auto 42px!important;
    padding:16px!important;
    border-radius:14px!important;
  }
  html body.vf10122-settings-page .vf10122-settings-title,
  html body.vf10122-settings-route .vf10122-settings-title{
    width:calc(100% - 16px)!important;
    margin:14px auto 0!important;
    padding:18px!important;
    font-size:36px!important;
    border-radius:14px!important;
  }
  html body .vf10122-settings-form :is(.hp-form__footer,[class*="form__footer"]),
  html body .vf10122-settings-form :is(.hp-form__footer,[class*="form__footer"]) :is(a,button,input){
    width:100%!important;
  }
}