/* Source #1174: 118 YOBB – Job Publishing Pages */
/* =========================================================
   118 YOBB – JOB PUBLISHING PAGES CSS V12 / GLOBAL

   Julkaisupolun layout + WooCommerce bridge.

   Maksu- ja checkout-rakenne säilyy WooCommercen omana.
   Värit, fontit, napit, kentät ja korttipinnat käyttävät
   YOBB – Global Component Styles V13+ -tokeneita.
========================================================= */


/* =========================================================
   YLEINEN RAKENNE
========================================================= */

.yobb-publish-page-wrap,
.yobb-publish-page-wrap *,
.yobb-publish-page-wrap *::before,
.yobb-publish-page-wrap *::after {
  box-sizing: border-box;
}

.yobb-publish-page-wrap {
  display: grid;

  width: 100%;
  max-width: 980px;

  gap: var(--yobb-space-lg);

  margin: 28px auto;
  padding: 0 16px;

  color: var(--yobb-text);
  font-family: var(--yobb-font-body);
}

.yobb-publish-page-wrap
.yobb-job-progress {
  margin: 0;
}


/* =========================================================
   OTSIKKOKORTTI
========================================================= */

.yobb-publish-page-header {
  display: grid;
  gap: var(--yobb-space-sm);

  text-align: left;
}

.yobb-publish-page-eyebrow {
  color: var(--yobb-primary);
}

.yobb-publish-page-header h1 {
  margin: 0;

  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
}

.yobb-publish-page-description {
  max-width: 760px;
  margin: 0;

  line-height: 1.5;
}


/* =========================================================
   SISÄLTÖ
========================================================= */

.yobb-publish-page-content {
  min-width: 0;
}

.yobb-feed-preview-note {
  max-width: 620px;
  margin: 0 auto var(--yobb-space-md);

  text-align: center;
}

.yobb-job-feed-preview {
  display: flex;
  width: 100%;
  justify-content: center;
}

.yobb-feed-preview-list {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}


/* Feed-preview ei ole interaktiivinen */
.yobb-job-feed-preview
.yobb-feed-card
:is(
  a,
  button,
  [data-yobb-open-description],
  [data-yobb-share]
) {
  pointer-events: none !important;
  cursor: default !important;
}

.yobb-job-feed-preview
:is(
  .yobb-feed-side-actions,
  .yobb-feed-bottom-actions
) {
  display: none !important;
}


/* =========================================================
   SIVUN TOIMINTONAPIT

   Varsinainen visuaalinen tyyli tulee .yobb-btn-luokista.
========================================================= */

.yobb-publish-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--yobb-space-sm);

  width: 100%;
  max-width: 620px;

  margin: 0 auto;
}

.yobb-publish-page-actions
.yobb-btn {
  width: 100%;
}


/* =========================================================
   CHECKOUT SUMMARY
========================================================= */

.yobb-checkout-summary {
  display: flex;

  max-width: 820px;

  align-items: center;
  justify-content: space-between;

  gap: var(--yobb-space-lg);

  margin: 0 auto var(--yobb-space-md);
}

.yobb-checkout-summary > div {
  display: grid;
  gap: 3px;
}

.yobb-checkout-summary span {
  color:
    color-mix(
      in srgb,
      var(--yobb-text) 62%,
      transparent
    );

  font-family: var(--yobb-font-body);
  font-size: 13px;
}

.yobb-checkout-summary strong {
  color: var(--yobb-text);
}

.yobb-checkout-price,
.yobb-checkout-price .amount {
  color: var(--yobb-text) !important;

  font-family: var(--yobb-font-heading);
  font-size: 24px;
  font-weight: 600;
}


/* =========================================================
   WOOCOMMERCE CHECKOUT – WRAPPER
========================================================= */

.yobb-woocommerce-checkout {
  width: 100%;
  max-width: 820px;

  margin: 0 auto;
}

.yobb-woocommerce-checkout
form.checkout {
  display: grid;
  gap: var(--yobb-space-lg);
}


/* =========================================================
   WOOCOMMERCE CARD BRIDGE

   WooCommerce luo HTML:n itse, joten näihin ei voida lisätä
   yobb-card-luokkia suoraan ilman checkout-rakenteen
   muuttamista. Ulkoasu käyttää silti samoja Global-tokeneita.
========================================================= */

.yobb-woocommerce-checkout
:is(
  .checkout_coupon,
  .col2-set .col-1,
  #order_review
) {
  width: 100%;

  padding:
    var(--yobb-card-padding-desktop) !important;

  border:
    var(--yobb-card-border-width)
    solid
    var(--yobb-border-color) !important;

  border-left:
    var(--yobb-card-accent-width)
    solid
    var(--yobb-primary) !important;

  border-radius:
    var(--yobb-card-radius) !important;

  background:
    var(--yobb-card-background) !important;

  color:
    var(--yobb-text) !important;

  box-shadow:
    var(--yobb-card-shadow) !important;
}


/* =========================================================
   KUPONKI
========================================================= */

.yobb-woocommerce-checkout
.woocommerce-form-coupon-toggle {
  display: none !important;
}

.yobb-woocommerce-checkout
form.checkout_coupon {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: stretch;

  gap: var(--yobb-space-sm);

  margin: 0 0 var(--yobb-space-lg) !important;
}

.yobb-woocommerce-checkout
form.checkout_coupon::before {
  content: "Onko sinulla alennuskoodi?";

  grid-column: 1 / -1;

  color: var(--yobb-text);

  font-family: var(--yobb-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.yobb-woocommerce-checkout
form.checkout_coupon > p:first-of-type {
  grid-column: 1 / -1;

  margin: 0 !important;

  color:
    color-mix(
      in srgb,
      var(--yobb-text) 62%,
      transparent
    );

  font-family: var(--yobb-font-body);
}

.yobb-woocommerce-checkout
form.checkout_coupon
:is(
  .form-row-first,
  .form-row-last
) {
  width: 100% !important;
}

.yobb-woocommerce-checkout
form.checkout_coupon
.form-row-last {
  display: flex;
}


/* =========================================================
   LASKUTUSTIEDOT
========================================================= */

.yobb-woocommerce-checkout
.col2-set {
  width: 100%;
}

.yobb-woocommerce-checkout
.col2-set .col-1 {
  float: none;
}

.yobb-woocommerce-checkout
.col2-set .col-2 {
  display: none !important;
}

.yobb-woocommerce-checkout
.woocommerce-billing-fields h3,
.yobb-woocommerce-checkout
#order_review_heading {
  margin: 0 0 var(--yobb-space-md);

  color: var(--yobb-text) !important;

  font-family: var(--yobb-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.yobb-woocommerce-checkout
.woocommerce-billing-fields__field-wrapper {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--yobb-space-md);
}

.yobb-woocommerce-checkout
.form-row {
  float: none !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.yobb-woocommerce-checkout
.form-row-wide {
  grid-column: 1 / -1;
}

.yobb-woocommerce-checkout
.form-row label {
  display: block;

  margin: 0 0 var(--yobb-space-xs);

  color: var(--yobb-text) !important;

  font-family: var(--yobb-font-body);
  font-size: var(--yobb-label-font-size);
  font-weight: var(--yobb-label-font-weight);
  line-height: 1.3;
}

.yobb-woocommerce-checkout
.form-row .required {
  color: var(--yobb-primary) !important;
}


/* =========================================================
   CHECKOUT-KENTÄT – GLOBAL FIELD BRIDGE
========================================================= */

.yobb-woocommerce-checkout
:is(
  .input-text,
  select,
  .select2-selection
) {
  width: 100% !important;

  min-height:
    var(--yobb-field-height-desktop) !important;

  padding:
    var(--yobb-field-padding-y-desktop)
    var(--yobb-field-padding-x-desktop) !important;

  border:
    var(--yobb-field-border-width)
    solid
    var(--yobb-border-color) !important;

  border-radius:
    var(--yobb-field-radius) !important;

  background:
    var(--yobb-field-background) !important;

  color:
    var(--yobb-text) !important;

  box-shadow: none !important;

  font-family:
    var(--yobb-font-body) !important;

  font-size:
    var(--yobb-field-font-size) !important;

  line-height: 1.3 !important;
}

.yobb-woocommerce-checkout
.select2-selection {
  display: flex !important;
  align-items: center;
}

.yobb-woocommerce-checkout
.select2-selection__rendered {
  padding: 0 !important;
  color: var(--yobb-text) !important;
}

.yobb-woocommerce-checkout
:is(
  .input-text:focus,
  select:focus,
  .select2-container--focus .select2-selection
) {
  border-color:
    var(--yobb-primary) !important;

  outline: none;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--yobb-primary) 12%,
      transparent
    ) !important;
}


/* =========================================================
   ORDER REVIEW
========================================================= */

.yobb-woocommerce-checkout
#order_review_heading {
  margin-top: 0;
}

.yobb-woocommerce-checkout
.woocommerce-checkout-review-order-table,
.yobb-woocommerce-checkout
.shop_table.order_details {
  width: 100%;

  margin: 0 0 var(--yobb-space-lg) !important;

  table-layout: fixed;

  border:
    1px solid
    var(--yobb-border-color) !important;

  border-radius:
    var(--yobb-field-radius);

  background:
    var(--yobb-secondary);

  color:
    var(--yobb-text);
}

.yobb-woocommerce-checkout
.shop_table th,
.yobb-woocommerce-checkout
.shop_table td {
  padding: 13px 12px !important;

  border-color:
    var(--yobb-border-color) !important;

  color:
    var(--yobb-text) !important;

  font-family:
    var(--yobb-font-body) !important;

  overflow-wrap: anywhere;
}


/* =========================================================
   PAYMENT
========================================================= */

.yobb-woocommerce-checkout
#payment {
  overflow: hidden;

  border:
    1px solid
    var(--yobb-border-color) !important;

  border-radius:
    var(--yobb-card-radius) !important;

  background:
    var(--yobb-secondary) !important;
}

.yobb-woocommerce-checkout
#payment
ul.payment_methods {
  padding: var(--yobb-space-md) !important;

  border-bottom:
    1px solid
    var(--yobb-border-color) !important;
}

.yobb-woocommerce-checkout
#payment
.place-order {
  padding: var(--yobb-space-md) !important;
}

/* Paytrailin tyhjä/ylimääräinen kuvauslaatikko pois */
.yobb-woocommerce-checkout
.payment_method_paytrail
.payment_box,
.yobb-woocommerce-checkout
#payment .payment_box:empty {
  display: none !important;
}


/* =========================================================
   WOOCOMMERCE BUTTON BRIDGE → GLOBAL PRIMARY
========================================================= */

.yobb-woocommerce-checkout
:is(
  #place_order,
  button[name="apply_coupon"]
) {
  display: inline-flex !important;

  min-height:
    var(--yobb-button-height-desktop) !important;

  align-items: center;
  justify-content: center;

  padding:
    var(--yobb-button-padding-y-desktop)
    var(--yobb-button-padding-x-desktop) !important;

  border:
    var(--yobb-button-border-width)
    solid
    var(--yobb-button-primary-border) !important;

  border-radius:
    var(--yobb-button-radius) !important;

  background:
    var(--yobb-button-primary-background) !important;

  color:
    var(--yobb-button-primary-text) !important;

  font-family:
    var(--yobb-button-font-family) !important;

  font-size:
    var(--yobb-button-font-size) !important;

  font-weight:
    var(--yobb-button-font-weight) !important;

  line-height: 1.2 !important;

  text-decoration: none !important;
  text-transform: none !important;

  box-shadow: none !important;

  cursor: pointer;

  transition:
    background-color var(--yobb-button-hover-duration) ease,
    border-color var(--yobb-button-hover-duration) ease,
    color var(--yobb-button-hover-duration) ease,
    transform var(--yobb-button-hover-duration) ease;
}

.yobb-woocommerce-checkout
:is(
  #place_order,
  button[name="apply_coupon"]
):hover {
  border-color:
    var(--yobb-button-primary-hover-border) !important;

  background:
    var(--yobb-button-primary-hover-background) !important;

  color:
    var(--yobb-button-primary-hover-text) !important;

  transform:
    translateY(var(--yobb-button-hover-lift));
}

.yobb-woocommerce-checkout
#place_order {
  width: 100% !important;
}

.yobb-woocommerce-checkout
button[name="apply_coupon"] {
  min-width: 180px;
}


/* =========================================================
   WOOCOMMERCE INFOT / VIRHEET
========================================================= */

.yobb-woocommerce-checkout
:is(
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-error
) {
  margin: 0 0 var(--yobb-space-md) !important;

  padding: var(--yobb-alert-padding) !important;

  border:
    var(--yobb-alert-border-width)
    solid
    var(--yobb-border-color) !important;

  border-left:
    4px solid
    var(--yobb-primary) !important;

  border-radius:
    var(--yobb-alert-radius) !important;

  background:
    var(--yobb-secondary) !important;

  color:
    var(--yobb-text) !important;

  font-family:
    var(--yobb-font-body) !important;
}

.yobb-woocommerce-checkout
.woocommerce-error {
  border-left-color:
    #b42318 !important;
}

.yobb-woocommerce-checkout
:is(
  .woocommerce-info,
  .woocommerce-message
)::before {
  color: var(--yobb-primary) !important;
}


/* =========================================================
   PRIVACY / LINKS
========================================================= */

.yobb-woocommerce-checkout
:is(
  .woocommerce-privacy-policy-text,
  .woocommerce-privacy-policy-text p
) {
  max-width: 100%;

  color:
    color-mix(
      in srgb,
      var(--yobb-text) 72%,
      transparent
    ) !important;

  font-family:
    var(--yobb-font-body) !important;

  font-size: 14px !important;
  line-height: 1.5 !important;

  overflow-wrap: anywhere;
}

.yobb-woocommerce-checkout
:is(
  .woocommerce-privacy-policy-link,
  .woocommerce-remove-coupon,
  .woocommerce-info a
) {
  color:
    var(--yobb-primary) !important;

  font-weight: 600;
}


/* =========================================================
   JULKAISTU
========================================================= */

.yobb-published-result {
  display: grid;

  max-width: 760px;

  gap: var(--yobb-space-sm);

  margin: 0 auto;

  text-align: center;
}

.yobb-published-result h2,
.yobb-published-result p {
  margin: 0;
}

.yobb-published-result h2 {
  color: var(--yobb-text);

  font-family: var(--yobb-font-heading);
  font-size: 26px;
  font-weight: 600;
}

.yobb-published-result p {
  color: var(--yobb-text);
}

.yobb-published-icon {
  display: inline-flex;

  width: 54px;
  height: 54px;

  align-items: center;
  justify-content: center;

  justify-self: center;

  border-radius: 50%;

  background: var(--yobb-primary);
  color: var(--yobb-secondary);

  font-family: var(--yobb-font-ui);
  font-size: 25px;
  font-weight: 600;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

  .yobb-publish-page-wrap {
    gap: var(--yobb-space-md);

    margin: 16px auto;
    padding: 0 10px;
  }

  .yobb-publish-page-header h1 {
    font-size: 31px;
  }

  .yobb-publish-page-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .yobb-checkout-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .yobb-woocommerce-checkout
  :is(
    .checkout_coupon,
    .col2-set .col-1,
    #order_review
  ) {
    padding:
      var(--yobb-card-padding-mobile) !important;
  }

  .yobb-woocommerce-checkout
  form.checkout_coupon {
    grid-template-columns: 1fr;
  }

  .yobb-woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .yobb-woocommerce-checkout
  .form-row-wide {
    grid-column: auto;
  }

  .yobb-woocommerce-checkout
  button[name="apply_coupon"] {
    width: 100% !important;
    min-width: 0;
  }

  .yobb-woocommerce-checkout
  :is(
    .shop_table.order_details,
    .shop_table.woocommerce-checkout-review-order-table
  ) {
    display: block;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .yobb-woocommerce-checkout
  .shop_table th,
  .yobb-woocommerce-checkout
  .shop_table td {
    min-width: 105px;

    padding: 11px 9px !important;

    font-size: 13px;
  }
}