/* Stiluri pentru admin și frontend - vor fi adăugate ulterior */
@keyframes cod-bounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-10px); }
  40% { transform: translateY(-18px); }
  60% { transform: translateY(-8px); }
  80% { transform: translateY(-3px); }
}
.cod-anim-bounce {
    animation: cod-bounce 0.8s;
}

@keyframes cod-pulse {
  0% { box-shadow: 0 0 0 0 rgba(50,150,255,0.5); }
  70% { box-shadow: 0 0 0 14px rgba(50,150,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(50,150,255,0); }
}
.cod-anim-pulse {
  animation: cod-pulse 1.1s;
}

@keyframes cod-shake {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-7px);} 
  20%,40%,60%,80% { transform: translateX(7px);} 
}
.cod-anim-shake {
  animation: cod-shake 0.6s;
}

#woo-cod-popup-btn {
    width:100%;
    min-height:48px;
    text-transform:none;
}

/* ------ Enhanced form appearance ------ */
.woo-cod-form-root {
  --cod-highlight: #007cba;
  --cod-border: #eee;
  --cod-button-bg: #f6b93b;
  background: var(--cod-bg, #fff);
  padding: 24px 17px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border: 1px solid var(--cod-border);
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

@media (max-width: 480px) {
  .woo-cod-form-root {
    max-width: 95vw;
  }
}

/* ------ Basic form styling ------ */
.woo-cod-form-root form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cod-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cod-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.cod-title {
  font-weight: 700;
  font-size: 16px;
}

.cod-field {
  margin-bottom: 12px;
}

.woo-cod-form-root label {
/*  display: block;*/
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  align-items: center;
}

.woo-cod-form-root input,
.woo-cod-form-root select {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.woo-cod-form-root input:focus,
.woo-cod-form-root select:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
}

.woo-cod-form-root button[type="submit"] {
  background: var(--cod-button-bg, #f6b93b);
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.2s ease;
  width: 100%;
  text-transform:none;
}

.woo-cod-form-root button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cod-offer-card {
  position: relative;
  display: flex;
  gap: 10px;
  border: 3px solid var(--cod-border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 8px;
  align-items: center;
}
.cod-offer-card.selected {
  border-color: #f09831;
  border-width: 3px;
  background: #fdf5ea;
}
.offer-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}
.offer-details {
  flex: 1;
}
.offer-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: #333;
}
.price-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.offer-price {
  font-weight: 700;
  font-size: 18px;
  color: #ca232c;
}
.offer-old {
  text-decoration: line-through;
  color: #99a0a7;
  font-size: 14px;
}
.offer-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e74c3c;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}
.offer-ship {
  font-size: 14px;
  color: #555;
}

/* Delivery fee styling inside quantity offer cards */
.offer-ship.ship-fee {
  background: #a9a9a9;
  color: #fff;
  border-radius: 0 0 5px 5px;
  display: inline-block;
  padding: 0 5px;
}

.offer-ship.ship-free {
  background: #47b426;
  color: #fff;
  border-radius: 0 0 5px 5px;
  display: inline-block;
  padding: 2px 7px;
  font-weight: bold;
}
.offer-savings {
  color: #47b426;
  font-size: 14px;
  font-weight: bold;
}
.offer-check {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 18px;
  color: var(--cod-highlight);
}

.upsell-box {
  padding: 0;
}
.woo-cod-upsell {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  margin-bottom: 6px;
  align-items: start;
  border-radius: 5px;
  margin-top: 10px;
  padding: 16px 10px;
  border-color: #24b800;
  border-width: 2px;
  border-style: solid;
  background-color: #f2feee;
}
.woo-cod-upsell input[type="checkbox"] {
  grid-row: 1 / span 2;
  grid-column: 1;
  margin-top: 4px;
  min-width: 20px;
}
.upsell-thumb {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}
.upsell-title {
  grid-row: 1;
  grid-column: 3;
  font-weight: 600;
}
.upsell-desc {
  grid-row: 2;
  grid-column: 3;
  font-size: 12px;
  color: #555;
}

.cod-shipping-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.woo-cod-shipping-option {
  margin: 4px 0;
  padding: 15px;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px;
  border-width: 1px;
}

.woo-cod-summary {
  margin: 8px 0;
  font-weight: 600;
  border-radius: 5px;
  color: #4f4e4e;
  background-color: #f9f9f9;
  border: solid 1px #d3d3d3;
  padding: 5px;
  /* align text individually using flex on each line */
}

.sum-line {
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.sum-line .sum-price {
  text-align: right;
}

.sum-line .sum-discount {
  color: red;
}

.sum-total {
  font-size: 16px;
  background: #f7f7f7;
  padding: 2px;
  border-radius: 6px;
  color: #000;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.sum-separator {
  border-top: 1px solid #ccc;
  margin: 6px 0;
}

.woo-cod-success {
  padding: 16px;
  background: #f0fff0;
  border: 1px solid #0a0;
  text-align: center;
  border-radius: 6px;
  margin-bottom: 12px;
}

.woo-cod-error {
  color: #c00;
  margin-top: 4px;
  font-weight: 600;
}

/* ================= Admin styles ================= */
#cod-form-editor-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}

#cod-editor-sidebar {
  flex: 0 0 380px;
  max-width: 100%;
}

#cod-editor-sidebar label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

#cod-editor-sidebar input[type="text"],
#cod-editor-sidebar input[type="number"],
#cod-editor-sidebar select {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.cod-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}

.cod-editor-tab {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.cod-editor-tab.active {
  background: #007cba;
  border-color: #007cba;
  color: #fff;
}

#cod-editor-preview {
  flex: 1;
  min-width: 360px;
  max-width: 500px;
}

#woo-cod-popup-content {
    padding: 0 0 !important;
}

.warranty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
}
.checkout-warranty__icon img { width: 115px; height: auto; display: block; }
.checkout-warranty__text { font-size: 14px; line-height: 1.35; }

@media (min-width: 400px) {
  .checkout-warranty__icon {
    width: 80px;
  }
}
@media (max-width:576px){
   .checkout-warranty__icon {
    width: 115px;
    padding: 12px 5px 9px 1px;
  }
} 
.warranty img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.checkout-warranty__text {
  padding-left: 10px;
}

/* === Animations ported (durata/easing din fișierul clientului) === */
/* Hints de performanță pe toate animatiile noastre */
.cod-anim-bounce,
.cod-anim-pulse,
.cod-anim-shake {
  -webkit-transform: translate3d(0,0,0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

/* === BOUNCE (cqBounce) === */
.cod-anim-bounce {
  -webkit-animation: cqBounce .82s cubic-bezier(.36,.07,.19,.97) both;
          animation: cqBounce .82s cubic-bezier(.36,.07,.19,.97) both;
}
@-webkit-keyframes cqBounce {
  15% { -webkit-transform: translateY(0); transform: translateY(0); }
  35% { -webkit-transform: translateY(-35%); transform: translateY(-35%); }
  45% { -webkit-transform: translateY(0%); transform: translateY(0); }
  55% { -webkit-transform: translateY(-20%); transform: translateY(-20%); }
  70% { -webkit-transform: translateY(0%); transform: translateY(0); }
  80% { -webkit-transform: translateY(-10%); transform: translateY(-10%); }
  90% { -webkit-transform: translateY(0%); transform: translateY(0); }
  95% { -webkit-transform: translateY(-2%); transform: translateY(-2%); }
  99% { -webkit-transform: translateY(0%); transform: translateY(0); }
  to  { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes cqBounce {
  15% { transform: translateY(0); }
  35% { transform: translateY(-35%); }
  45% { transform: translateY(0%); }
  55% { transform: translateY(-20%); }
  70% { transform: translateY(0%); }
  80% { transform: translateY(-10%); }
  90% { transform: translateY(0%); }
  95% { transform: translateY(-2%); }
  99% { transform: translateY(0%); }
  to  { transform: translateY(0); }
}

/* === PULSE (cqPulse) — mai vizibil decât varianta noastră cu box-shadow === */
.cod-anim-pulse {
  -webkit-animation: cqPulse .82s cubic-bezier(.36,.07,.19,.97) both;
          animation: cqPulse .82s cubic-bezier(.36,.07,.19,.97) both;
}
@-webkit-keyframes cqPulse {
  0%  { -webkit-transform: scale(1);   transform: scale(1); }
  50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  to  { -webkit-transform: scale(1);   transform: scale(1); }
}
@keyframes cqPulse {
  0%  { transform: scale(1); }
  50% { transform: scale(1.1); }
  to  { transform: scale(1); }
}

/* === SHAKE Left-Right (cqShakeLeftRight) === */
.cod-anim-shake {
  -webkit-animation: cqShakeLeftRight .82s cubic-bezier(.36,.07,.19,.97) both;
          animation: cqShakeLeftRight .82s cubic-bezier(.36,.07,.19,.97) both;
}
@-webkit-keyframes cqShakeLeftRight {
  10%,90% { -webkit-transform: translate3d(-1px,0,0); transform: translate3d(-1px,0,0); }
  20%,80% { -webkit-transform: translate3d( 2px,0,0); transform: translate3d( 2px,0,0); }
  30%,50%,70% { -webkit-transform: translate3d(-4px,0,0); transform: translate3d(-4px,0,0); }
  40%,60% { -webkit-transform: translate3d( 4px,0,0); transform: translate3d( 4px,0,0); }
}
@keyframes cqShakeLeftRight {
  10%,90% { transform: translate3d(-1px,0,0); }
  20%,80% { transform: translate3d( 2px,0,0); }
  30%,50%,70% { transform: translate3d(-4px,0,0); }
  40%,60% { transform: translate3d( 4px,0,0); }
}

/* (Optional) Dacă vrei și “tada”, o poți activa și printr-o clasă nouă: */
.cod-anim-tada {
  -webkit-animation: cqTada .82s cubic-bezier(.36,.07,.19,.97) both;
          animation: cqTada .82s cubic-bezier(.36,.07,.19,.97) both;
}
@-webkit-keyframes cqTada {
  0% { -webkit-transform: scaleX(1); transform: scaleX(1); }
  10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg); }
  30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg); }
  40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg); }
  to { -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes cqTada {
  0% { transform: scaleX(1); }
  10%,20% { transform: scale3d(.9,.9,.9) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale3d(1.1,1.1,1.1) rotate(3deg); }
  40%,60%,80% { transform: scale3d(1.1,1.1,1.1) rotate(-3deg); }
  to { transform: scaleX(1); }
}

button[disabled] { opacity: .6; cursor: not-allowed; }

/* ====== UI pentru câmpurile cu icon (ca în „de implementat.JPG”) ====== */
.cod-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.cod-input-wrap {
  position: relative;
}

.cod-input-wrap.with-icon input {
  padding-left: 46px; /* loc pentru icon */
}

/* “pictograma” din stânga (emoji -> simplu și compatibil) */
.cod-input-wrap.with-icon::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 6px 0 0 6px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #444;
}

/* setăm simbolul specific pe wrapper-ul cu clasă */
.cod-input-wrap.icon-user::before  { content: '👤'; }
.cod-input-wrap.icon-phone::before { content: '📞'; }
.cod-input-wrap.icon-pin::before   { content: '📍'; }

/* aspect general input/select – se integrează cu ce ai deja */
.woo-cod-form-root input::placeholder { color: #8c8c8c; }

/* select – o idee de stil mai „tare” ca în mock (opțional) */
.woo-cod-form-root select {
  background-color: #f2f2f6;
  border-color: #d6d6dd;
}
.woo-cod-form-root select:focus {
  background-color: #fff;
}

/* butoane dezactivate (opțional, pentru UX în admin) */
button[disabled] { opacity: .6; cursor: not-allowed; }

/* Gratuit (transport) în verde în summary */
.woo-cod-summary .sum-price.sum-free {
  color: #47b426;
  font-weight: 600;
}

/* Transport gratuit (în lista de opțiuni) */
.woo-cod-shipping .woo-cod-free {
  color: #47b426;
  font-weight: 600;
}

/* === Header cu logo centrat + titlu formular === */
.cod-header.cod-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cod-header .cod-logo {
  max-width: 140px;
  max-height: 60px;
  object-fit: contain;
}
.cod-header .cod-form-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* Animație „dance” pentru borderul upsell */
.upsell-dance { animation: border-dance .3s linear infinite; }
@keyframes border-dance {
  to {
    background-position:
      left 15px top,
      right -15px bottom,
      left bottom 15px,
      right top -15px;
  }
}

/* Desktop: lățime focusată și padding confortabil în card */
@media (min-width: 769px) {
  #woo-cod-popup-content {
    background: transparent !important;
    padding: 0 !important;
  }
  #woo-cod-popup-content .woo-cod-form-root {
    max-width: 640px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
    position: relative;            /* <-- ADĂUGAT: butonul se va raporta la cutia formularului */
    padding-top: 40px;             /* <-- opțional: spațiu sus ca să nu se suprapună “×” peste titlu */
  }
}

.woo-cod-custom-offers-wrap .offer-card { cursor:pointer; }