@font-face{
	 font-family: Bold;
	 src : url(../fonts/nino.ttf);
}

@font-face{
	 font-family: Normal;
	 src : url(../fonts/gl-mkafio-regular.ttf);
}

body{
	 font-family: Normal;
}

h1,h2,h3,h4,h5,h6, button, .btn, .modal-title{
	 font-family: Bold;
	 color: grey;
}


button, .btn{
	 color: white;
	 font-size: 0.9rem;
}

.modal-title i{
	 margin-right: 5px;
}

.modal p{
	color: #808080b8;
    margin: 0;
    font-size: .9rem;
}

.modal-header small{
	 font-size: .7rem;
}

.modal-body{
	 padding: 1.4rem 1rem;
}

.fw-semibold{
	 font-family: Bold;
	 font-size: 0.9rem;
}


div[class*="col-"]{

	 margin-bottom: 15px;
}

img{
	max-width: 100%;
}

.total_cost_div{
	 border-radius: 15px;
	 padding: 10px 15px;
}

.hidden{
	 display: none;
}

/* ჰოვერ ეფექტი ბარათისთვის */
.custom-sports-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.custom-sports-card:hover {
    transform: translateY(-5px);
    border-color: #0d6efd !important; /* Bootstrap Primary ფერი ჩარჩოზე */
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.15) !important; /* ლურჯი ნათება */
}

.btn-success {
    color: #fff;
    background-color: #07e57e;
    border-color: #00ff89;
}


/* პროგრესის ზონა */
        .progress-header {
            padding: 15px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            font-weight: bold;
            color: #333;
        }

        /* სლაიდერის კონტეინერი */
        .swiper {
            width: 90%;
            margin: 20px auto;
        }

        /* თითოეული ბარათი */
        .swiper-slide {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            padding: 20px;
            border: 1px solid #e1e4e8;
        }

        /* ფოტოს ნაჭერი (Crop) */
        .crop-area {
            width: 100%;
         
            background: #eaeaea;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .crop-area img {
           
            height: 100%;
            object-fit: cover;
        }

        /* ტექსტის შესაყვანი ველი */
        .input-group {
            position: relative;
            flex-grow: 1;
        }

        .input-group label {
            display: block;
            font-size: 12px;
            color: #777;
            margin-bottom: 5px;
        }

        .input-group textarea {
            width: 100%;
            height: 100px;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            resize: none;
            outline: none;
            transition: border-color 0.2s;
        }

        .input-group textarea:focus {
            border-color: #007aff;
        }

        /* წაშლის პატარა ღილაკი ველის შიგნით */
        .clear-btn {
            position: absolute;
            right: 13px;
            bottom: 7px;
            background-color: #df377587;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }

        /* ქვედა მართვის პანელი (ცერა თითის ზონა) */
        .actions-footer {
            margin-top: auto;
            background: #fff;
            padding: 15px;
            display: flex;
            gap: 10px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }

        .btn {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .btn:active {
            opacity: 0.8;
        }

        .btn-prev {
            background: #e4e6eb;
            color: #4b4f56;
        }

        .btn-next {
            background: #007aff;
            color: #fff;
        }
.input-group{
	 flex-direction: column;
}

 .input-group>.form-control, .input-group>.form-select {
    position: relative;
    flex: 1 1 auto;
     width: 100%; 
    min-width: 0;
}


/* თუ სპანი ცარიელია, გამოაჩინე შესაბამისი ატრიბუტის ტექსტი */
p[data-type]:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8; /* ნაცრისფერი ლეიბლი */
    font-style: italic;
}

.info_div p{
	  margin: 0;
}

.info_div{
	cursor: auto;
	    line-height: 25px;
    padding: 10px;
    border: 1px solid #ffb1004f;
    border-radius: 5px;
    position: relative;
}

.save_data{
	position: absolute;
    padding: 5px 10px;
    font-size: 0.8rem;
    right: 20px;
    bottom: -12px;
    cursor: pointer !important;
}

.delete_order{
	  position: absolute;
	  top: 5px;
	  right: 10px;
	  width: 35px;
	  height: 35px;
	  border-radius: 50%;
	  font-size: 0.8rem;
	  color: white;
	  background-color: #ff0000;
      box-shadow: 2px 0px 11px #1abd2eeb;
      padding: 0;

}

.delete_order i{
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}

.btn-sm{
	padding: 6px;
    font-size: .9rem;
}

.modal-header{
	 border:none;
	 background-color: red;
	 padding: .4rem 1rem;
	 background-color: #094bad;
	 align-items: normal;
}

.modal-header small, .modal-header button{
	 color: white;
	 background: none;
	 opacity: .8;
}
.btn-check:focus+.btn, .btn:focus, button:focus, .btn-close:focus {
    outline: 0;
    box-shadow:none;
}

.btn-close:hover {
    color: #0bfd6cd1;
    opacity: .9;
}

.btn-warning:hover {

    color: #ffffff;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn:hover{

    color: white;
}

.modal-body p{
	font-family: Bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

/*gadasatani*/

.coins{
	 margin-right: 20px;
    display: flex;
    align-items: center;
    padding: 5px 15px;
    border: 1px dotted #0202022e;
    border-radius: 14px;
}

.coins button{
	    padding: 5px;
    margin-left: 10px;
    font-size: 0.8rem;
    border-radius: 7px;
}

.coins > i{
	 color: gold;
	 margin-right: 5px;
}

.spiner{
	    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: white;
    text-align: center;
    z-index: 15;
}

.spiner img{
	    height: 60%;
	        position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.spiner span{
	position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Bold';
}


@keyframes outline {
  from {
    stroke-dasharray: 0, 345.576px;
  }
  to {
    stroke-dasharray: 345.576px, 345.576px;
  }
}
#outline {
  animation: 0.38s ease-in outline;
  transform: rotate(0deg);
  transform-origin: center;
}

@keyframes circle {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
#white-circle {
  animation: 0.35s ease-in 0.35s forwards circle;
  transform: none;
  transform-origin: center;
}

@keyframes check {
  from {
    stroke-dasharray: 0, 75px;
  }
  to {
    stroke-dasharray: 75px, 75px;
  }
}
#check {
  animation: 0.34s cubic-bezier(0.65, 0, 1, 1) 0.8s forwards check;
  stroke-dasharray: 0, 75px;
}

@keyframes check-group {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
  to {
    transform: scale(1);
  }
}
#check-group {
  animation: 0.32s ease-in-out 1.03s check-group;
  transform-origin: center;
}

.modal-body {
   
    text-align: center;
    min-height: 200px;
}

.saccessCount{
	    top: 76%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Bold';
    width: 100%;
    color: grey;
}