body {
    font-family: 'Roboto', sans-serif;
}

.modular-wrapper { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.modular-wrapper h5 { margin: 0 0 8px; font-weight:700; }
.modular-wrapper p  { margin: 0 0 8px; }

.red-border {
  border: 2px solid red;
  outline: none; /* optional, pentru a elimina conturul albastru */
}

	#qtyCopertina,
	.ext-qty {
	  border: 2px solid #d62828 !important;
	  box-shadow: 0 0 5px rgba(214, 40, 40, 0.35) !important;
	  border-radius: 4px !important;
	  outline: none !important;
	  transition: all .2s ease-in-out;
	  background-clip: padding-box;
	  min-width: 90px;           /* să fie suficient de vizibil */
	}
	
	/* Focus */
	#qtyCopertina:focus,
	.ext-qty:focus {
	  border-color: #b30000 !important;
	  box-shadow: 0 0 8px rgba(179, 0, 0, 0.55) !important;
	}

	/* Dacă folosești Bootstrap, suprascriem și aceste combinații (specificitate mai mare) */
	input.qty-highlight.form-control,
	input.form-control.qty-highlight,
	input.form-control-sm.qty-highlight,
	input[type="number"].qty-highlight {
	  border: 2px solid #d62828 !important;
	  box-shadow: 0 0 5px rgba(214, 40, 40, 0.35) !important;
	  border-radius: 4px !important;
	  outline: none !important;
	  background-clip: padding-box;
	}
	
	input.qty-highlight.form-control:focus,
	input.form-control.qty-highlight:focus,
	input.form-control-sm.qty-highlight:focus {
	  border-color: #b30000 !important;
	  box-shadow: 0 0 8px rgba(179, 0, 0, 0.55) !important;
	}
    
    .step { margin-bottom: 20px; }
    .hidden { display: none; }
    /* Boxuri de 50x50px pentru rezumatul de sus */
    .summary-box {
      width: 150px;
      height: 150px;
      margin: 0 auto;
      border: 1px solid #ccc;
      background-size: cover;
      background-position: center;
      line-height: 50px;
      font-weight: bold;
      vertical-align: middle;
      text-align: center;
    }
    /* Boxurile de selecție pentru culori: 120x30 cu etichetă dedesubt */
    .selection-color-box {
      width: 120px;
      height: 30px;
      border: 1px solid #000;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
    .selection-color-container {
      display: inline-block;
      margin: 5px;
    }
    /* Stil pentru imagini de brand (50x50px) */

	.box-size {
      width: 150px;
      height: 150px;
    }

    #brandOptions {
      display: flex;
      flex-wrap: wrap;         /* permite trecerea pe mai multe rânduri */
      justify-content: center; /* centrează totul */
      gap: 8px;               /* spațiu între branduri */
    }
    
    .brand-item {
      display: flex;
      flex-direction: column;  /* imagine sus, text jos */
      align-items: center;
      width: 150px;            /* lățime fixă pentru consistență */
      cursor: pointer;
      text-align: center;
    }
    
    .brand-image {
      width: 150px;
      height: auto;
      border: 1px solid #ccc;
          margin: 5px;
      border-radius: 5px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .brand-image:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    
    .brand-selected {
      outline: 3px solid #ff0000;
    }
    
    .brand-name {
      margin-top: 6px;
      margin-bottom: 0px;
      font-weight: bold;
      font-size: 16px;
      color: #333;
    }
    
    .brand-lengths {
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 14px;
      color: #555;
    }
    
    .recapitulare_model {
      text-transform: uppercase;
      font-weight: bold;
    }

    @media (min-width: 992px) {

    }
    
    @media (max-width: 991px) {

    }
    
    @media (max-width: 479px) {
        .summary-box {
              width: 90px;
              height: 90px;
              margin: 0 auto;
              border: 1px solid #ccc;
              background-size: cover;
              background-position: center;
              line-height: 50px;
              font-weight: bold;
              vertical-align: middle;
              text-align: center;
        }
        .box-size {
             width: 90px;
             height: 90px;
        }
        .brand-image {
              width: 120px;
              height: 120px;
              cursor: pointer;
              border: 1px solid #ccc;
              margin: 5px;
        }
    }