/* Zajednički stil za "app" stranice (Napravi, kasse, Kontakt, danke).
   Prije je ovo bilo kopirano u <style> na svakoj stranici. */
body.app-page{
  background:#F2F6FF;color:#333;display:flex;flex-direction:column;min-height:100vh;
  font-family:'Cabinet Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:where(.app-page) *{margin:0;padding:0}
.app-page button,.app-page input,.app-page select,.app-page textarea{font:inherit}
.app-page main{flex:1;max-width:900px;width:90%;margin:40px auto;background:#fff;padding:40px;border-radius:20px}
.app-page h1{font-size:40px;margin-bottom:30px;color:#26272B}
.page-kasse main,.page-danke main{max-width:1100px;background:none;padding:0;border-radius:0}
.page-kasse h1{font-size:32px;margin-bottom:25px}

/* ---- Napravi ---- */
      /* Kontrole za prilagodbu */
      .customizer {
          display: flex;
          flex-direction: column;
          gap: 25px;
      }

      /* Gumb za prijenos slika */
      .upload-btn-wrapper {
          position: relative;
          overflow: hidden;
          display: inline-block;
      }

      .btn-upload {
          border: none;
          color: #26272B;
          background-color: #E2EBFF;
          padding: 14px 28px;
          border-radius: 12px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.2s, opacity 0.2s;
      }

      .btn-upload:hover:not(:disabled) {
          background-color: #D2E0FF;
      }

      .upload-btn-wrapper input[type=file] {
          font-size: 100px;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          cursor: pointer;
      }

      /* Kontejner za Pregled (Preview) Slika */
      .image-preview-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          margin-top: 20px;
      }

      /* Kartica pojedinačne slike s kontrolama */
      .preview-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          background: #fff;
          padding: 10px;
          border-radius: 14px;
          border: 1px solid #D9E5FF;
      }

      .preview-item {
          position: relative;
          width: 110px;
          height: 110px;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 4px 10px rgba(0,0,0,0.08);
          border: 2px solid #D9E5FF;
          cursor: pointer;
      }

      .preview-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      /* Gumb za brisanje pojedinačne slike */
      .remove-btn {
          position: absolute;
          top: 4px;
          right: 4px;
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          border: none;
          border-radius: 50%;
          width: 22px;
          height: 22px;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s;
          z-index: 2;
      }

      .remove-btn:hover {
          background: rgba(220, 38, 38, 0.9);
      }

      /* Količina selector po slici */
      .item-qty-control {
          display: flex;
          align-items: center;
          background-color: #fff;
          border: 1px solid #D9E5FF;
          border-radius: 8px;
          padding: 2px;
      }

      .item-qty-btn {
          background: none;
          border: none;
          width: 28px;
          height: 28px;
          font-size: 16px;
          color: #8DA7FF;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          user-select: none;
          font-weight: bold;
      }

      .item-qty-btn:hover {
          background-color: #E2EBFF;
          border-radius: 6px;
      }

      .item-qty-input {
          width: 32px;
          border: none;
          background: transparent;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          outline: none;
      }

      /* Custom Tekst input */
      .text-input-wrapper {
          width: 100%;
          margin-top: 10px;
      }

      .text-input {
          width: 100%;
          padding: 14px 18px;
          border: 1px solid #D9E5FF;
          background-color: #fff;
          border-radius: 12px;
          font-size: 15px;
          outline: none;
          transition: border-color 0.2s;
      }

      .text-input:focus {
          border-color: #8DA7FF;
      }

      /* Prikaz cijene */
      .price-section {
          margin-top: 20px;
          padding-top: 25px;
          border-top: 1px solid #D9E5FF;
      }

      .price-label {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 1px;
          color: #8DA7FF;
          text-transform: uppercase;
          margin-bottom: 5px;
      }

      .price-amount {
          font-size: 64px;
          font-weight: 600;
          color: #26272B;
      }

      .price-note {
          font-size: 13px;
          color: #515C75;
          margin-top: 4px;
      }

      /* Modal za pregled slike */
      .modal {
          display: none;
          position: fixed;
          z-index: 1000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.85);
          justify-content: center;
          align-items: center;
          flex-direction: column;
      }

      .modal-content {
          max-width: 80%;
          max-height: 80vh;
          border-radius: 8px;
          box-shadow: 0 5px 25px rgba(0,0,0,0.5);
          object-fit: contain;
      }

      .close-modal {
          position: absolute;
          top: 20px;
          right: 30px;
          color: #fff;
          font-size: 35px;
          font-weight: bold;
          cursor: pointer;
      }

      .carousel-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.2);
          color: white;
          border: none;
          font-size: 28px;
          padding: 15px;
          cursor: pointer;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s;
          user-select: none;
      }

      .carousel-btn:hover {
          background: rgba(255, 255, 255, 0.5);
      }

      .prev-btn { left: 30px; }
      .next-btn { right: 30px; }

      .modal-counter {
          color: #ffffff;
          margin-top: 15px;
          font-size: 16px;
      }

/* ---- Kasse ---- */
        /* Layout s 2 kolone */
        .checkout-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        @media (max-width: 850px) {
            .checkout-container {
                grid-template-columns: 1fr;
            }
        }

        /* Lijeva strana - Forma za dostavu */
        .delivery-section {
            background: #ffffff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        }

        .delivery-section h2 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #1e293b;
        }

        .form-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
        }

        .form-group input, .form-group select {
            padding: 12px 14px;
            border: 1px solid #D9E5FF;
            border-radius: 10px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }

        .form-group input:focus, .form-group select:focus {
            border-color: #4a72ff;
        }

        /* Desna strana - Pregled narudžbe */
        .order-summary-section {
            background: #ffffff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-summary-section h2 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #1e293b;
        }

        .items-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 5px;
            margin-bottom: 20px;
        }

        .summary-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px;
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .summary-item img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 8px;
        }

        .summary-item-details {
            flex: 1;
        }

        .summary-item-details p {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
        }

        .summary-item-details span {
            font-size: 13px;
            color: #64748b;
        }

        .custom-text-display {
            background: #E2EBFF;
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 14px;
            color: #26272B;
            margin-bottom: 20px;
        }

        .custom-text-display strong {
            display: block;
            font-size: 12px;
            color: #4a72ff;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .add-more-btn {
            display: inline-block;
            text-align: center;
            background-color: #f1f5f9;
            color: #475569;
            text-decoration: none;
            padding: 10px 18px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 20px;
            transition: background 0.2s;
        }

        .add-more-btn:hover {
            background-color: #e2e8f0;
        }

        .price-summary {
            border-top: 1px solid #f0f0f0;
            padding-top: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .price-sub-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #64748b;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 22px;
            font-weight: 700;
            color: #1e293b;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #f0f0f0;
        }

        .free-shipping-badge {
            font-size: 12px;
            color: #16a34a;
            font-weight: 600;
        }

        .btn-submit {
            width: 100%;
            border: none;
            color: #ffffff;
            background-color: #4a72ff;
            padding: 16px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: background 0.2s;
        }

        .btn-submit:hover {
            background-color: #3b5bdb;
        }

.summary-item img{flex:none}
.summary-item .item-qty-control{margin-top:6px;display:inline-flex}
.summary-remove{background:none;border:none;color:#94a3b8;font-size:22px;cursor:pointer;padding:4px 8px;line-height:1}
.summary-remove:hover{color:#dc2626}
.order-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:10px 14px;font-size:14px;margin-top:16px}
.btn-submit:disabled{opacity:.6;cursor:wait}

/* ---- Kontakt ---- */
.contact-form{max-width:500px;margin:40px auto;display:flex;flex-direction:column;gap:16px}
.contact-form .form-row{display:flex;gap:16px}
.contact-form .form-row .form-input{flex:1}
.contact-form .full-width{width:100%}
.contact-form .form-input{background:#fff;border:1.5px solid #dbe3fe;border-radius:16px;padding:16px 20px;font-size:15px;color:#333;outline:none;box-shadow:0 2px 4px rgba(0,0,0,.02);transition:border-color .2s,box-shadow .2s}
.contact-form .form-input::placeholder{color:#6c757d}
.contact-form .form-input:focus{border-color:#8ab0ff;box-shadow:0 0 0 3px rgba(138,176,255,.25)}
.contact-form .form-textarea{min-height:140px;resize:vertical}
.btn-container{display:flex;justify-content:center;margin-top:8px}
.submit-btn{background:#f4f7ff;color:#1a1a1a;border:1.5px solid #4a4a4a;border-radius:12px;padding:12px 36px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}
.submit-btn:hover{background:#e2e8ff;border-color:#1a1a1a}
@media (max-width:480px){.contact-form .form-row{flex-direction:column}}