/*
 * DeadMrazHR / Faza 3
 * Završni ekrani naručivanja u vizuelnom jeziku direktorovih nacrta.
 * Odvojeni sloj: bez izmene postojećeg rasporeda UI koraka ili poslovne logike.
 */
:root {
  --f3-red: #a40303;
  --f3-red-dark: #890000;
  --f3-green: #2d5e40;
  --f3-green-hover: #244f35;
  --f3-cream: #faf6ee;
  --f3-panel: #ffffff;
  --f3-beige: #f4eee1;
  --f3-border: #e5d4b6;
  --f3-ink: #38342f;
  --f3-muted: #746c61;
  --f3-focus: #b1844a;
}

/* Osnovni tonovi kartica u razgovoru. Uvodna dugmad iz prethodne faze se ne menjaju. */
.chat-area :is(.addon-product-card, .book-choice-card, .addon-summary,
  .addon-manage-panel, .contact-summary, .checkout-offer,
  .order-complete-panel, .order-overview-details) {
  background: var(--f3-panel);
  border: 1px solid var(--f3-border);
  box-shadow: 0 3px 13px rgba(71, 48, 29, .035);
  color: var(--f3-ink);
}
.chat-area :is(.addon-product-card, .book-choice-card, .addon-summary,
  .addon-manage-panel, .contact-summary, .checkout-offer,
  .order-complete-panel, .order-overview-details) {
  border-radius: 18px;
}
.chat-area :is(.addon-product-card, .book-choice-card, .addon-manage-card,
  .checkout-one-choice, .checkout-country-tile) {
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.chat-area :is(.addon-product-card.is-selected, .book-choice-card.is-recommended,
  .addon-manage-card.is-selected, .checkout-one-choice.is-selected) {
  border-color: var(--f3-green);
  background: #f5faf5;
  box-shadow: inset 0 0 0 1px var(--f3-green);
}

/* Zajednička dugmad koja se pojavljuju u fazama posle početnog razgovora. */
.chat-area :is(.retro-btn, .addon-button.primary, .checkout-choose-button,
  .order-overview-action, .addon-manage-finish, .order-complete-new,
  .final-review-submit, .contact-confirm-button) {
  background: var(--f3-green);
  color: #fff;
  border: 1.5px solid var(--f3-green);
  box-shadow: none;
  outline: none;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: normal;
  text-shadow: none;
  min-height: 50px;
}
.chat-area :is(.retro-btn, .addon-button.primary, .checkout-choose-button,
  .order-overview-action, .addon-manage-finish, .order-complete-new,
  .final-review-submit, .contact-confirm-button):hover:not(:disabled) {
  background: var(--f3-green-hover);
  border-color: var(--f3-green-hover);
  box-shadow: none;
  transform: none;
  filter: none;
}
.chat-area :is(.retro-btn.ghost, .addon-button.secondary, .addon-button.outline,
  .order-overview-action:nth-child(2)) {
  color: var(--f3-green);
  background: #fff;
  border: 1.5px solid var(--f3-green);
  box-shadow: none;
  outline: none;
}
.chat-area :is(.retro-btn.ghost, .addon-button.secondary, .addon-button.outline,
  .order-overview-action:nth-child(2)):hover:not(:disabled) {
  color: var(--f3-green-hover);
  background: #f3f9f3;
  border-color: var(--f3-green-hover);
}
.chat-area :is(button, a):focus-visible,
:is(.letter-modal, .addon-modal, .checkout-country-modal) :is(button, a, input):focus-visible {
  outline: 3px solid var(--f3-focus);
  outline-offset: 3px;
}
.chat-area button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.chat-area :is(.addon-button, .checkout-choose-button, .retro-btn) img {
  flex-shrink: 0;
}
.chat-area .addon-button {font:700 14px/1.35 var(--font-body); padding:11px 16px;}
.chat-area .addon-button.primary img { filter: brightness(0) invert(1); }
.chat-area .addon-button.remove {
  background:#fff;
  border-color:#d6aaa0;
  color:#9e312c;
  border-radius:11px;
}
.chat-area .addon-button.remove:hover:not(:disabled) {background:#fff1ee;}
.chat-area .retro-btn .arrow { color:inherit; }

/* Izbor poklon-knjige. */
.chat-area .book-choice-heading {
  font:700 clamp(20px,2.4vw,26px)/1.32 var(--font-body);
  color:var(--f3-red);
  margin-bottom:6px;
}
.chat-area .book-choice-grid {gap:16px;}
.chat-area .book-choice-card {padding:15px;gap:12px;}
.chat-area .book-choice-card.is-recommended {padding:14px;}
.chat-area .book-choice-card .addon-thumb {
  background:var(--f3-cream);
  border:1px solid #eee1cc;
  border-radius:13px;
  height:186px;
}
.chat-area .book-choice-card .addon-product-name {
  font:700 17px/1.45 var(--font-body);
  color:var(--f3-ink);
}
.chat-area .book-choice-card .addon-button {min-height:48px;}
.chat-area .book-choice-recommended {
  display:inline-flex;align-self:flex-start;
  padding:6px 11px;
  border-radius:999px;
  background:#e9f3e9;
  color:var(--f3-green);
  font:700 12px/1.35 var(--font-body);
}

/* Ponuda proizvoda i dodataka. */
.chat-area .addon-product-card {padding:15px;gap:15px;}
.chat-area .addon-thumb,
.chat-area .addon-selection-icon {
  background:var(--f3-cream);
  border:1px solid #eddfcb;
  border-radius:13px;
}
.chat-area .addon-product-name {font:700 18px/1.35 var(--font-body);color:var(--f3-ink);}
.chat-area .addon-product-price {font:700 18px/1.3 var(--font-body);color:var(--f3-red);}
.chat-area .addon-product-prompt,
.chat-area .addon-help {color:var(--f3-muted);font:15px/1.6 var(--font-body);}
.chat-area .addon-product-actions {gap:9px;}
.chat-area .addon-summary {padding:18px 19px;gap:12px;}
.chat-area .addon-summary>strong {font:700 20px/1.35 var(--font-body);color:var(--f3-red);}
.chat-area .addon-summary-row {gap:10px;align-items:center;}
.chat-area .addon-selection-row {border-bottom:1px solid #eee2d3;padding:11px 0;}
.chat-area .addon-selection-name {color:var(--f3-ink);}
.chat-area .addon-selection-price {color:var(--f3-green);}
.chat-area .addon-summary-total {color:var(--f3-green);}
.chat-area .addon-summary-subtotal {color:var(--f3-red);}
.chat-area .addon-checkbox-label {color:var(--f3-green);}
.chat-area .addon-checkbox-label input {accent-color:var(--f3-green);}
.chat-area .addon-manage-panel {padding:clamp(15px,3vw,26px);}
.chat-area .addon-manage-head {border-bottom-color:var(--f3-border);}
.chat-area .addon-manage-head h3 {font:700 clamp(21px,2.8vw,28px)/1.3 var(--font-body);color:var(--f3-red);}
.chat-area .addon-manage-kicker {color:var(--f3-muted);}
.chat-area .addon-manage-card {
  background:#fff;border:1px solid var(--f3-border);border-radius:15px;
  box-shadow:none;
}
.chat-area .addon-manage-card.is-selected {border-color:var(--f3-green);box-shadow:inset 0 0 0 1px var(--f3-green);}
.chat-area .addon-manage-image {background:var(--f3-cream);}
.chat-area .addon-manage-body h4 {color:var(--f3-ink);}
.chat-area .addon-manage-price {color:var(--f3-red);font:700 18px/1.3 var(--font-body);}
.chat-area .addon-manage-ribbon {background:var(--f3-green);border:0;box-shadow:none;}
.chat-area .addon-manage-quantity {background:var(--f3-cream);border-color:var(--f3-border);color:var(--f3-ink);}
.chat-area .addon-manage-total strong {color:var(--f3-red);font-family:var(--font-body);}
.chat-area .addon-manage-note {background:#f1f8f0;border-color:#c5dcc9;}
.chat-area .addon-manage-footer {border-top-color:var(--f3-border);}

/* Podaci za dostavu i pregled kontakata. */
.chat-area .contact-summary {padding:22px;}
.chat-area .contact-summary h3 {
  color:var(--f3-red);
  font:700 clamp(19px,2.5vw,24px)/1.3 var(--font-body);
}
.chat-area .contact-summary-group {border-color:var(--f3-border);}
.chat-area .contact-summary-group h4 {color:var(--f3-green);}
.chat-area .contact-summary-group dt {color:var(--f3-muted);}
.chat-area .contact-summary-group dd {color:var(--f3-ink);}
.chat-area .contact-summary-done {color:var(--f3-green);}

/* Završni pregled: jedna čitljiva celina bez dekorativnih unutrašnjih ramova. */
.chat-area .checkout-offer {
  padding:clamp(17px,3vw,30px);
  gap:20px;
  isolation:auto;
}
.chat-area .checkout-offer::before,
.chat-area .checkout-offer::after {display:none;}
.chat-area .checkout-eyebrow,
.chat-area .checkout-review-eyebrow {
  color:var(--f3-red);
  letter-spacing:.14em;
  font-size:11px;
}
.chat-area .checkout-one-title,
.chat-area .checkout-heading h3 {
  font:700 clamp(23px,3vw,30px)/1.24 var(--font-body);
  color:var(--f3-red);
  letter-spacing:-.018em;
}
.chat-area .checkout-one-intro,
.chat-area .checkout-heading-copy {color:var(--f3-muted);font-size:14px;}
.chat-area .checkout-one-section {
  border-top:1px solid #eadbc5;
  padding-top:19px;
  gap:13px;
}
.chat-area .checkout-one-section>h4 {font:700 17px/1.35 var(--font-body);color:var(--f3-ink);}
.chat-area .checkout-one-person,
.chat-area .checkout-destination {
  background:var(--f3-cream);
  border:1px solid var(--f3-border);
  border-radius:14px;
  box-shadow:none;
}
.chat-area .checkout-one-person strong {color:var(--f3-green);}
.chat-area .checkout-destination {padding:14px;gap:12px;}
.chat-area .checkout-destination-icon {background:#eaf3ea;border-color:#d4e5d5;border-radius:12px;}
.chat-area .checkout-destination-text strong {color:var(--f3-ink);}
.chat-area .checkout-text-action {color:var(--f3-green);text-decoration:none;}
.chat-area .checkout-one-edit {color:var(--f3-green);font-weight:700;}
.chat-area .checkout-one-edit-fields {
  background:var(--f3-cream);
  border:1px solid var(--f3-border);
  border-radius:14px;
}
.chat-area .checkout-one-edit-field input,
.chat-area .checkout-one-country {
  background:#fff;
  border:1.5px solid #d9c9b2;
  border-radius:11px;
  min-height:45px;
  color:var(--f3-ink);
}
.chat-area .checkout-one-edit-field input:focus,
.chat-area .checkout-one-country:focus {
  outline:2px solid var(--f3-green);outline-offset:2px;
}
.chat-area .checkout-one-bill-line {border-color:#efe4d4;color:var(--f3-ink);font-size:14px;}
.chat-area .checkout-one-bill-line strong {color:var(--f3-green);}
.chat-area .checkout-one-total {
  background:var(--f3-green);
  border-radius:13px;
  padding:18px;
  color:#fff;
}
.chat-area .checkout-one-total strong {font-family:var(--font-body);font-weight:700;}
.chat-area .checkout-one-choice {
  min-height:57px;
  border:1.5px solid #dbcab2;
  border-radius:12px;
  background:#fff;
  color:var(--f3-ink);
  padding:14px 15px;
}
.chat-area .checkout-one-choice:hover:not(.is-unavailable) {border-color:var(--f3-green);}
.chat-area .checkout-one-choice.is-selected {
  border-color:var(--f3-green);
  background:#edf6ee;
  box-shadow:inset 0 0 0 1px var(--f3-green);
}
.chat-area .checkout-one-choice input {accent-color:var(--f3-green);}
.chat-area .checkout-one-choice-body {overflow-wrap:anywhere;}
.chat-area .checkout-one-choice-body small {color:var(--f3-muted);}
.chat-area .checkout-one-tracking {
  background:var(--f3-cream);
  border:1px solid var(--f3-border);
  border-radius:12px;
}
.chat-area .checkout-one-method-note {background:#edf7ec;color:var(--f3-green);}
.chat-area .checkout-one-legal {border-color:var(--f3-border);}
.chat-area .checkout-one-consent {color:var(--f3-ink);font-size:13px;}
.chat-area .checkout-one-consent a {color:var(--f3-green);}
.chat-area .checkout-one-finish {min-height:58px;font-size:16px;}
.chat-area .checkout-one-status.is-error,
.chat-area .checkout-one-method-note.is-error {background:#fff1ef;color:#8b2d2d;}

/* Stalni sažetak porudžbine, bez velikog vizuelnog opterećenja. */
.chat-area .order-persistent-overview {padding:0;margin:4px auto 8px;}
.chat-area .order-overview-details {overflow:hidden;}
.chat-area .order-overview-summary {
  background:var(--f3-cream);
  border-radius:17px;
  padding:14px 16px;
}
.chat-area .order-overview-header-text strong {color:var(--f3-ink);}
.chat-area .order-overview-header-total,
.chat-area .order-overview-item>strong {color:var(--f3-green);}
.chat-area .order-overview-body {border-color:var(--f3-border);background:#fff;}
.chat-area .order-overview-actions {gap:10px;}
.chat-area .order-overview-action {border-radius:11px;min-height:43px;}

/* Potvrđena, neuspešna ili odložena uplata – jasno različiti statusi. */
.chat-area .order-complete-panel {padding:clamp(22px,4vw,34px);}
.chat-area .order-complete-mark {
  border:2px solid #d3e3d5;
  border-radius:50%;
  background:#eff8f0;
  box-shadow:none;
}
.chat-area .order-complete-panel h3 {
  color:var(--f3-red);
  font:700 clamp(23px,3vw,31px)/1.3 var(--font-body);
}
.chat-area .order-complete-number {border-bottom-color:var(--f3-border);}
.chat-area .order-complete-number strong {color:var(--f3-green);font-family:var(--font-body);}
.chat-area .order-complete-info {color:var(--f3-muted);font-size:14px;}
.chat-area .order-complete-panel.is-payment-paid .order-complete-mark {background:#e9f5eb;border-color:var(--f3-green);}
.chat-area .order-complete-panel.is-payment-failed .order-complete-mark {background:#fff0ed;border-color:#ba6b62;}
.chat-area .order-complete-panel.is-payment-failed h3 {color:var(--f3-red);}

/* Izbor zemlje, opis dodatka i uređivanje pisma — isti modalni sistem. */
.checkout-country-modal,
.addon-modal-shade,
.letter-modal-shade {background:rgba(33,39,32,.67);backdrop-filter:blur(3px);}
.checkout-country-dialog,
.addon-modal-panel,
.letter-modal-panel {
  background:var(--f3-cream);
  border:1px solid var(--f3-border);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(25,33,24,.23);
}
.checkout-country-dialog {padding:clamp(17px,3vw,28px);}
.checkout-country-dialog-head {border-color:var(--f3-border);}
.checkout-country-dialog-head h2 {color:var(--f3-red);font:700 clamp(21px,3vw,28px)/1.3 var(--font-body);}
.checkout-country-tile {
  border:1.5px solid var(--f3-border);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  color:var(--f3-ink);
  min-height:58px;
}
.checkout-country-tile.is-current {border-color:var(--f3-green);background:#eaf4eb;}
.checkout-country-close {border-color:var(--f3-border);background:#fff;}
.addon-modal-header,
.letter-modal-toolbar {
  background:var(--f3-red);
  border-bottom:1px solid var(--f3-red-dark);
  color:#fff;
}
.addon-modal-header h2,
.letter-modal-toolbar h2 {color:#fff;font:700 clamp(17px,2.2vw,23px)/1.3 var(--font-body);}
#addon-modal-price {color:#fff8da;}
.addon-modal-close,
.letter-modal-action {
  min-height:43px;
  background:#fff;
  color:var(--f3-red);
  border:1px solid rgba(255,255,255,.86);
  border-radius:11px;
  font-weight:700;
  box-shadow:none;
}
.letter-modal-action.secondary {background:transparent;color:#fff;border-color:rgba(255,255,255,.65);}
.addon-modal-close:hover:not(:disabled),
.letter-modal-action:hover:not(:disabled) {background:#f8efe3;}
.letter-modal-action.secondary:hover:not(:disabled) {background:#8c0505;}
.letter-modal-scroll,
.addon-modal-description {background:var(--f3-cream);}
.letter-modal .letter-view-tools {
  background:#fff;
  border-color:var(--f3-border);
  color:var(--f3-ink);
}
.letter-modal .letter-view-tools button {
  min-height:42px;
  background:var(--f3-green);
  color:#fff;
  border:1px solid var(--f3-green);
  border-radius:11px;
}
.letter-modal .letter-view-tools button:hover {background:var(--f3-green-hover);}
.letter-modal .letter-wrapper {border-color:#dac4a4;}
.letter-instructions {color:var(--f3-muted);}

/* Mobilna čitljivost — bez horizontalnog prelivanja ili sitnih dodirnih zona. */
@media (max-width:760px) {
  .chat-area .book-choice-grid,
  .chat-area .addon-bulk-cards,
  .chat-area .addon-manage-grid {grid-template-columns:1fr;}
  .chat-area .book-choice-card .addon-thumb {height:185px;}
  .chat-area .addon-product-card {padding:12px;gap:12px;}
  .chat-area .addon-product-name {font-size:16px;}
  .chat-area .addon-product-price {font-size:17px;}
  .chat-area .addon-product-actions {width:100%;display:flex;flex-wrap:wrap;}
  .chat-area .addon-product-actions .addon-button {flex:1 1 130px;}
  .chat-area .addon-manage-image {height:170px;}
  .chat-area .addon-summary {padding:14px;}
  .chat-area .checkout-one-people {grid-template-columns:1fr;}
  .chat-area .checkout-offer {padding:15px 12px;gap:17px;}
  .chat-area .checkout-one-bill-line {font-size:13px;}
  .chat-area .checkout-one-choice {padding:13px 12px;}
  .chat-area .checkout-one-total {padding:14px;gap:9px;flex-wrap:wrap;}
  .chat-area .checkout-one-total strong {font-size:21px;}
  .chat-area .checkout-destination {flex-wrap:wrap;}
  .chat-area .checkout-destination .checkout-text-action {margin-left:auto;}
  .chat-area .order-complete-number {gap:8px;flex-wrap:wrap;}
  .letter-modal-panel,
  .addon-modal-panel {border:0;border-radius:0;box-shadow:none;}
  .letter-modal-toolbar {gap:8px;padding:12px;}
  .letter-modal-actions {gap:6px;width:100%;}
  .letter-modal-action {min-height:42px;padding:9px 10px;flex:1 1 auto;}
  .addon-modal-header {padding:13px;}
  .checkout-country-grid {grid-template-columns:1fr;gap:9px;}
}
@media(max-width:420px){
  .chat-area .checkout-one-payment-list {grid-template-columns:1fr;}
  .chat-area .addon-manage-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .chat-area .addon-manage-buttons .addon-button {min-width:0;}
  .chat-area .checkout-one-bill-line {gap:7px;}
  .chat-area .checkout-one-bill-line strong {white-space:normal;}
  .chat-area .order-overview-summary {gap:9px;padding:12px;}
  .chat-area .order-overview-header-total {white-space:normal;text-align:right;}
  .chat-area .order-overview-actions {grid-template-columns:1fr;}
  .chat-area .checkout-one-total strong {white-space:normal;}
  .chat-area .checkout-one-choice {font-size:13px;}
}
@media(prefers-reduced-motion:reduce) {
  .chat-area :is(.addon-product-card, .book-choice-card, .addon-manage-card,
    .checkout-one-choice) {transition:none;}
}

/* Završne mobilne korekcije nakon provere stvarnih rasporeda (320/390 px). */
@media(max-width:430px) {
  .chat-area .addon-manage-card {flex-direction:column;min-height:0;}
  .chat-area .addon-manage-image {width:100%;height:164px;min-height:0;flex:none;}
  .chat-area .addon-manage-body {padding:13px;gap:10px;}
  .chat-area .addon-manage-body h4 {font-size:16px;}
  .chat-area .addon-manage-buttons {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .chat-area .addon-manage-buttons .addon-button {
    min-width:0;min-height:44px;
    font-size:13px!important;
    padding:9px 10px!important;
  }
  .chat-area .checkout-destination {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px 12px;
    align-items:center;
  }
  .chat-area .checkout-destination-icon {width:44px;height:44px;}
  .chat-area .checkout-destination-text {min-width:0;}
  .chat-area .checkout-destination .checkout-text-action {
    grid-column:2;
    justify-self:start;
    margin-left:0;
    padding:5px 0;
    min-height:38px;
  }
}

/* Ispravka: uklanjamo svetlu ploču/gradijent oko donjeg polja za poruke.
   Lepljivi položaj ostaje funkcionalan; vidljivi su samo input i akcije. */
body.is-chatting .chat-action-dock,
body.is-chatting:not(.checkout-single-active) .chat-action-dock {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
  padding-top: 0;
}
body.is-chatting .chat-action-dock .order-cancel-bar,
body.is-chatting .chat-action-dock .letter-preview-bar {
  background: transparent;
  box-shadow: none;
}