@import "../bootstrap-touchspin/jquery.bootstrap-touchspin.min.css";

:root {
	/* Normal Durum Renkleri */
	--stoper-def-bg: #ffffff;
	--stoper-def-border: #e4e8eb;
	--stoper-def-text: #5c6c7a; /* Okunabilir bir gri tonu */

	/* Hover & Aktif Durum Renkleri */
	--stoper-act-bg: #f6f8fd;
	--stoper-act-border: #005095;
	--stoper-act-text: #005095; /* Kenarlık ile aynı renk, okunabilir */
	--stoper-act-border-rgb: 0, 80, 149; /* #005095'in RGB hali (gölge için) */
	
	/* Mavi Temaya Özel Renkler */
    --stoper-blue-default: var(--stoper-act-border); /* #005095 */
    --stoper-blue-hover: #0077b6; /* #005095'ten biraz daha açık mavi */
    --stoper-blue-fill: #005095; /* Hover'da dolgu rengi */
}

body, html {
	margin: 0;
}

.thumbnail {
  position: relative;
  width: 120px;   /* istersen değişken bırakabilirsin */
  height: 120px;  /* istersen değişken bırakabilirsin */
  background-color: #ffffff;
  border: 1px solid #c1c6e4;
  border-radius: 6px;
  margin-top: 6px;
}

.thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.vertical-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.responsive-iframe-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 80%;
	overflow: hidden;
}

.responsive-iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bg-soft {
	background-color: #f6f6fb!important;
}

.baskiadeti input {
	display: inline-flex;
	border: 1px solid #c1c6e4;
	border-radius: 4px;	
	background: #fff;
	height: 30px!important;
}

.touchspin {
	max-width: 4em;
	max-height: 30px!important;	
	background: transparent;
	border: 0;
	border-right-width: 0px;
	border-right-style: none;
	border-right-color: currentcolor;
	border-left-width: 0px;
	border-left-style: none;
	border-left-color: currentcolor;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	-moz-appearance: textfield;
	border-radius: 0;
	outline: 0;
	border-left: 1px solid #c1c6e4;
	border-right: 1px solid #c1c6e4;
	line-height: 1.15;
	padding: 0;
	margin: 0;
}

.bootstrap-touchspin-injected {
	display: flex;
	justify-content: start;
	align-items: center;
	height: 30px!important;
}

.input-group-append, .input-group-prepend {
	height: 30px!important;
}

.btn-sm-spin {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 24px!important;
	line-height: 24px!important;
	padding-top: 0px!important;
}

.btn-spin {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px!important;
	line-height: 30px!important;
	padding-top: 0px!important;
}

.btn-sm-prepend {
	padding-bottom: 4px!important;
}

.btn-sm-append {
	padding-bottom: 2px!important;
}

.btn-prepend {
	padding-bottom: 0px!important;
	border: 1px solid #c1c6e4!important;
	color: #899097!important;
}

.btn-append {
	padding-bottom: 0px!important;
	border: 1px solid #c1c6e4!important;
	color: #899097!important;
}

.mh-24 {
	height: 24px!important;
}

.lh-24 {
	line-height: 24px!important;
}

.upload-cloud {
	width: 20px; 
	height: 16px; 
}

.link-stoper {
	color: #005095;
	text-decoration: none;
	font-size: 16px;
	transition: color 0.3s ease; /* renk değişimi 0.3 saniyede yumuşak geçiş */
}

.link-stoper:hover {
	color: #2172b7;
}

.materials-thumbnail img {
	width: 124px!important;
	height: 124px!important;
	padding: 4px;
	border: 1px solid #c1c6e4;
	border-radius: 8px;
}

.colors-thumbnail img {
	width: 80px!important;
	height: 80px!important;
	padding: 4px;
	border: 1px solid #c1c6e4;
	border-radius: 8px;
}

.list-group-numbered > .material-step::before  {
	content: "" counter(section) ". ";
	font-size: 15px !important;
}

.step-radio {
	width: 16px !important;
	height: 16px !important;
}

.step-radio:checked {
	background-color: #005095 !important;
	border-color: #005095 !important;
	box-shadow: none !important;
}

.mw-200 {
	width: 200px!important;
}

.w-600 {
	width: 600px!important;
}

.soft-badge {
  background-color: #eff1f7;
  color: #000000;
  font-size: 0.875rem;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
  font-weight: 500;
}

.kalinlik-sec.selected {
	border: 2px solid #005095 !important; /* Mavi kenarlık */
	background-color: #e9f2ff;
	color: #005095;
	font-weight: 600;
}

/* Özel Checkbox */

.teklif-radio-circle {
  position: relative;
  display: inline-block;
}

/* input gizle ama yer kaplasın ki tıklanabilir olsun */
.teklif-radio-circle .form-check-input {
  opacity: 0;
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

/* Label daireyi ve check ikonunu gösterecek */
.teklif-radio-circle .form-check-label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  line-height: 22px;
  font-size: 14px;
  color: #000;
}

/* Dairenin dış çerçevesi ve arkaplan */
.teklif-radio-circle .form-check-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid #005095;
  border-radius: 50%;
  background-color: transparent; /* Boş halde */
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s;
  z-index: 0;
}

/* Check simgesi - boş halde mavi, daire içinde */
.teklif-radio-circle .form-check-label::after {
  font-family: FontAwesome;
  content: "\f00c"; /* fa-check */
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #005095; /* boş halde mavi */
  z-index: 1;
  transition: color 0.3s;
}

/* Checked olunca arkaplan mavi dolu */
.teklif-radio-circle .form-check-input:checked + .form-check-label::before {
  background-color: #005095;
  border-color: #005095;
}

/* Checked olunca simge beyaz */
.teklif-radio-circle .form-check-input:checked + .form-check-label::after {
  color: white;
}

.btn-outline-stoper {
	background-color: var(--stoper-def-bg);
	border-color: var(--stoper-def-border);
	color: var(--stoper-def-text);
	/* Animasyonun yumuşak olmasını sağlar */
	transition: all 0.15s ease-in-out;
}

/* Mouse ile üzerine gelindiğinde (hover) ve odaklanıldığında (focus) */
.btn-outline-stoper:hover,
.btn-outline-stoper:focus,
.btn-outline-stoper:active,
.btn-outline-stoper.active { /* Düzeltme burada */
	background-color: var(--stoper-act-bg);
	border-color: var(--stoper-act-border);
	color: var(--stoper-act-text);
	/*box-shadow: 0 0 0 0.25rem rgba(var(--stoper-act-border-rgb), 0.5);*/
}

.btn-outline-stoper-blue {
    /* Varsayılan Stil: Koyu Mavi Border ve Yazı */
    background-color: var(--stoper-def-bg); /* Beyaz arka plan */
    color: var(--stoper-blue-default); /* #005095 yazı */
    
    /* İstenen Varsayılan Border Rengi: #005095 */
    border: 2px solid var(--stoper-blue-default);
    
    /* Temel Stil */
    transition: all 0.2s ease-in-out;
    cursor: pointer; 
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
}

/* Hover, Focus ve Active Durumları */
.btn-outline-stoper-blue:hover,
.btn-outline-stoper-blue:focus,
.btn-outline-stoper-blue:active {
    /* Hover'da Border Rengi Açılıyor (Daha Canlı Mavi) */
    border-color: var(--stoper-blue-hover); 
    
    /* Arka plan dolusu efekti için */
    background-color: var(--stoper-blue-fill); /* #005095 dolgu */
    color: #ffffff; /* Beyaz yazı */
}

.icon-covering {
	width: 24px;
    height: 24px;
    background-image: url('svg/covering.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-painting {
	width: 24px;
    height: 24px;
    background-image: url('svg/painting.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-upload {
	width: 20px;
    height: 20px;
    background-image: url('svg/upload.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-check {
	width: 18px;
    height: 18px;
    background-image: url('svg/check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.bg-orange {
	background-color: #ff5e00 !important;
}

.fa-thin {
	font-weight: 100; /* çoğu durumda işe yaramayabilir */
    transform: scale(0.7); /* küçük ölçek ile ince görünümü simüle eder */
    opacity: 0.6; /* biraz daha hafif gösterir */
}

.border-bottom-thin-secondary {
	border-bottom: 0.3px solid #dee2e6!important;
}

.overflow-x-hidden {
	overflow-x: hidden !important;
}

.image-olcu-container {
    position: relative; 
}

.image-olcu-container img {
    display: block;
    z-index: 5;
	margin-top: 10px;
	margin-left: 10px;
}

.olcu-cizgisi {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    color: #333;
}

.olcu-metni {
    background-color: white; 
    color: #333;
    font-size: 14px;
    font-weight: bold;
    padding: 0 10px;
    line-height: 1;
    white-space: nowrap;
    z-index: 12;
    pointer-events: auto;
}

.olcu-genislik {
    top: -10px;
    left: 0;
    width: calc(100% - 10px);
    height: 2px;
	margin-left: 10px;
    background-color: #333;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.olcu-genislik::before,
.olcu-genislik::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #333;
    top: 50%; 
    transform: translateY(-50%);
}

.olcu-genislik::before {
    left: 0; 
}

.olcu-genislik::after {
    right: 0;
}

.olcu-genislik .genislik-metni {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -8px;
}

.olcu-yukseklik {
    top: 10px;
    left: -10px;
    height: calc(100% - 10px);
    width: 2px;
    background-color: #333;
}


.olcu-yukseklik .yukseklik-metni {
    position: absolute;
    top: 50%;
    left: -46px; 
    transform: rotate(-90deg) translateY(-50%); 
}

.olcu-yukseklik::before,
.olcu-yukseklik::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background-color: #333;
    left: 50%;
    transform: translateX(-50%);
}

.olcu-yukseklik::before {
    top: 0;
}

.olcu-yukseklik::after {
    bottom: 0;
}

.sepet-ozet-sticky {
    position: sticky;
    top: 86px; 
    z-index: 100;
}

@media (max-width: 767.98px) {
    .sepet-ozet-sticky {
        position: static;
        top: auto;
    }
}