@font-face {
  font-family: markgeo;
  src: url(/fonts/Mark-GEO.ttf);
}       

@font-face {
  font-family: markbold;
  src: url(/fonts/Mark-GEO-BOLD.ttf);
} 
      
      

@font-face {
  font-family: markcaps;
  src: url(/fonts/Mark-GEO-CAPS.ttf);
}

.unblock a {
    padding: 5px 10px 4px 10px;
    color: #333;
    font-size: 15px;
    font-family: 'markbold';
    text-decoration: none;
    border-radius: 3px;
    background: #FCD217;
                      
}
                  
.unblock a:hover {color: #ffffff; background: #202020;}

#urls-container table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

#urls-container th, 
#urls-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

#urls-container th {
    background-color: #FCD217;
    color: #000000;
    font-weight: 500;
}

#urls-container tr:hover {
    background-color: #f5f7fa;
}

.click-count, .expires-at, .qr-code, .delete-url {
    text-align: center !important;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#urls-table tr {
    animation: fadeIn 0.5s ease-in;
}



#shorten-form button {font-family: 'markbold'; font-feature-settings: 'case' on;}


.info {
    padding: 15px;
    display: flex;
    color: #2078A5;
    font-size: 15px;
    border: 1px solid #BCD6E3;
    border-radius: 8px;
    gap: 0 10px;
    background: #F0F6F8;
}

.info p {margin: 0;}


.info a {color: #2078A5; font-family: 'markbold'; text-decoration: none;}

.info img {filter: brightness(0) saturate(100%) invert(33%) sepia(88%) saturate(576%) hue-rotate(159deg) brightness(98%) contrast(83%);}


.remain-alert {
    display: flex;
    padding: 5px 15px 5px 15px;
    color: #1D9534;
    font-size: 14px;
    border: 1px solid #BCE4C4;
    border-radius: 8px;
    gap: 0 10px;
    background: #F1F9F3;
}

.remain-alert  img {filter: brightness(0) saturate(100%) invert(41%) sepia(72%) saturate(503%) hue-rotate(80deg) brightness(97%) contrast(96%);}

.copy-btn-small {
    color: #202020;
    margin-left: 5px;
    padding: 4px 7px;
    font-size: 13px;
}

.copy-btn-small-dash {
    color: #202020;
    padding: 4px 7px;
    font-size: 13px;
}



.result h3 {font-size: 15px; font-weight: 500;}
.webcafe {width: 103px;}      
.url-title a { margin: 0 0 0 5px; color: #000000; font-size: 14px; transition: color 0.2s;}
.url-title-front a {margin: 0 0 0 5px; color: #000000; font-size: 14px; transition: color 0.2s;}
.long-url {color: #9B9B9B; font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    
}
.url-title a:hover {color: #FCD217; transition: color 0.2s;}
.url-title-front a:hover {color: #FCD217; transition: color 0.2s;}



.logout-btn {
    background-color: #EB4C42;
    color: #ffffff;
    padding: 7px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin: 10px;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: #333;
    color: #fff;
}



        * {
            box-sizing: border-box;
            font-family: 'markgeo';
        }
        
        body {
            margin: 0;
            padding: 0;
            background-image: url("/images/dot-grid.jpg");
            color: #333;
            line-height: 1.6;
            background-color: rgba(255,255,255,0.3);
            background-blend-mode: lighten;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 2rem 0;
        }
        
        header {
            text-align: center;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
        }
        
        .header-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 0 15px;
        }
        
        .auth {
            padding: 7px 7px 3px 7px;
            color: #202020;
            border: 2px solid #FCD217;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        @media only screen and (max-width: 768px) {
            .info {
                font-size: 15px;
            }
            
           .auth {padding: 5px !important;}
           .reg {padding: 7px !important;}
           
            .auth a {
                font-size: 13px !important;
            }
            
            .reg a {
                font-size: 13px !important;
            }
            
            .top-left img {width: 80px !important;}
            
            
        }
        
        
        .auth:hover {background: #FCD217; transition: background-color 0.3s;}
        .reg:hover {color: #ffffff; background: #202020; transition: background-color 0.3s;}
        
        .reg {
            padding: 9px 9px 5px 9px;
            color: #202020;
            background: #FCD217;
            border-radius: 5px;
            transition: background-color 0.3s
        }
        
        
        .top-left  {margin-right: auto;}
        
        .top-left img {width: 90px;}
        
        .top-right ul {
            margin: 0;
            padding: 0;
            display: flex;
            gap: 0 15px;
            list-style-type: none;
            text-decoration: none;
        }
        
        
        .top-right ul li {
            float: left;
            font-size: 13px;
            font-family: 'markbold';
            font-feature-settings: 'case' on;
        }
        
        
        
        

.auth-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border 0.3s;
}

.auth-form input:focus {
    border-color: #FCD217;
    outline: none;
}

.auth-form button {
    width: 100%;
    background-color: #FCD217;
    color: #000000;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-form button:hover {
    color: #ffffff;
    background-color: #333333;
}


.stats h2 {
    font-family: 'markbold'; 
    font-feature-settings: 'case' on;
    color: #202020;
}
        
        h1 {
            font-size: 2.5rem;
            color: #202020;
            margin-top: 0;
            margin-bottom: 0.5rem;
            font-family: 'markbold';
            font-feature-settings: 'case' on;
        }
        
        #copy-btn {height: 38px; font-family: 'markbold'; line-height: 15px; font-feature-settings: 'case' on;}
        
        p.subtitle {
            color: #525764;
            font-size: 1.1rem;
        }
        
        .shortener-form {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        input[type="url"] {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        input[type="url"]:focus {
            border-color: #FCD217;
            outline: none;
        }
        
        
        
        
        button {
            background-color: #FCD217;
            color: #000000;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button:hover {
            color: #ffffff;
            background-color: #333333;
        }
        
        .result {
            display: none;
            background: white;
            padding: 1.5rem;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            margin-top: 1rem;
        }
        
        .result.show {
            display: block;
        }
        
        .short-url {
            display: flex;
            align-items: center;
        }
        
        .short-url input {
            flex-grow: 1;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-right: none;
            border-radius: 4px 0 0 4px;
            font-size: 1rem;
        }
        
        .short-url input[type="text"]:focus {
            border-color: #FCD217;
            outline: none;
            border-right: none;
        }
        
        .short-url button {
            border-radius: 0 4px 4px 0;
        }
        
        .stats {
            margin-top: 2rem;
        }
        
        .stats h2 {
            margin-bottom: 1rem;
            color: #202020;
            font-family: 'markbold';
            font-feature-settings: 'case' on;
        }
        
        .stats th {font-weight: 500;}
        
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        
        
        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: #FCD217;
            color: #000000;
        }
        
        tr:hover {
            background-color: #f5f7fa;
        }
        
        .click-count {
            text-align: center;
        }
        
        footer {
            margin-top: 2rem;
            color: #525764;
            font-size: 0.9rem;
            display: flex;
            justify-content: center;
        }
        
        footer p {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        
        
        footer img {
            vertical-align: middle;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .shortener-form {
                padding: 1.5rem;
            }
        }
        

#urls-table tr td {
    vertical-align: middle;
    padding: 12px 10px;
}

#urls-table-body tr td {
    vertical-align: middle;
    padding: 12px 15px;
}

#urls-table tr:hover {
    background-color: #f8f9fa;
}

#urls-table tr td:nth-child(2) {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent);
  mask-image: linear-gradient(to right, black 70%, transparent);
}

.usrip {
    text-align: center;
}

/* Tooltip styles */
[title] {
    position: relative;
}
[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 5px;
}
[title]:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 5px);
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    z-index: 101;
}


#urls-table-body tr td:nth-child(2) {
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
  mask-image: linear-gradient(to right, black 80%, transparent);
}

.text-center {
    text-align: center;
}

.timeleft {font-size: 12px;}

.text-danger {
    color: #dc3545;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#urls-table tr {
    animation: fadeIn 0.5s ease-in;
}


.dashboard-header {
    margin-bottom: 2rem;
}

.stat-cards {
    margin-bottom: 2rem;
}

.stat-card {
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
}


@media only screen and (max-width: 768px) {
    
    .dashboard-header h1 {font-size: 25px;}
    
    .logout-btn {
        margin-top: 1rem;
    }
    
    .stat-cards {
        grid-template-columns: 1fr;
    }
}




.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}


.alert-dash {
    padding: 10px;
    margin-bottom: 1rem;
    border-radius: 4px;
    position: relative;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.alert-dash.fade-out {
    opacity: 0;
}


.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.auth-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.auth-form h1 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-form .subtitle {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #6c757d;
}

.auth-form a {
    text-decoration: none;
    font-weight: bold;
}






.delete-btn {
    color: #dc3545;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
    padding: 5px 8px;
    border-radius: 4px;
}

.delete-btn:hover {
    color: #fff;
    background-color: #dc3545;
}


.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}




.delete-btn.disabled {
    cursor: not-allowed;
    color: #ccc !important;
}

.delete-btn.disabled:hover {
    background: transparent !important;
}

.custom-modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center;}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:25px;border-radius:8px;max-width:400px;width:90%;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.modal-btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-family:'markbold';transition:0.2s;}
.cancel-btn{background:#f0f0f0;color:#333;} .cancel-btn:hover{color: #333; background:#e0e0e0;}
.confirm-btn{background:#dc3545;color:#fff;} .confirm-btn:hover{background:#c82333;}
.stat-card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.no-urls{text-align:center;font-family:'markgeo';}
.delete-btn{color:#dc3545;text-decoration:none;font-size:16px;padding:5px 8px;border-radius:4px;transition:0.3s;}
.delete-btn:hover{background:#dc3545;color:#fff;}
.pagination{display:flex;justify-content:center;gap:5px;margin-top:20px;} .pagination a{padding:5px 10px;border:1px solid #ddd;border-radius:4px;text-decoration:none;color:#202020;} .pagination a.active, .pagination a:hover{background:#FCD217;border-color:#FCD217;}



        .progress-container {
            margin: 30px 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .progress-circle {
            position: relative;
            width: 180px;
            height: 180px;
        }
        
        .progress-circle:nth-child(1) {margin-right: 25px;}
        
        .progress-circle svg {
            width: 100%;
            height: 100%;
            background: #ffffff;
            border-radius: 100%;
        }
        
        .progress-circle circle {
            fill: none;
            stroke-width: 10;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        
        .progress-bg {
            stroke: #f0f0f7;
        }
        
        .progress-bar {
            stroke-dasharray: 440;
            stroke-dashoffset: 440;
            transition: stroke-dashoffset 1s ease-out;
        }
        
        #urls-progress {
            stroke: #4a6bff;
        }
        
        #clicks-progress {
            stroke: #00c853;
        }
        
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .progress-text h4 {
            margin: 0;
            color: #525764;
            font-family: 'markgeo';
            font-weight: 500;
            font-size: 15px;
        }
        
        .progress-text p {
            margin: 3px 0 0;
            font-size: 2rem;
            color: #202020;
            font-family: 'markbold';
        }
        
        
        
        
        

        
/* Referral Tooltip Styles */
.referral-tooltip {
  background: white;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  padding: 15px;
  z-index: 1000;
  font-family: 'markgeo', sans-serif;
  color: #333;
}

.tooltip-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.tooltip-header h4 {
  margin: 0 0 5px 0;
  color: #202020;
  font-family: 'markbold';
  font-feature-settings: 'case' on;
}

.total-clicks {
  font-size: 14px;
  color: #525764;
}

.referral-chart {
  margin-bottom: 15px;
}


.chart-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.chart-label {
  width: 120px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-bar-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.chart-bar {
  height: 20px;
  background: #4a6bdf;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.chart-value {
  margin-left: 8px;
  font-size: 13px;
  color: #525764;
}

.referral-stats {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}


.referral-stats th {
  text-align: left;
  padding: 5px 8px;
  font-family: 'markbold';
}

.referral-stats td {
  padding: 5px 8px;
}

.referral-stats tr:last-child td {
  border-bottom: none;
}






.progress {
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    transition: width 0.6s ease;
}

.progress-bar-desktop {
    background-color: #4e73df; /* ლურჯი */
}

.progress-bar-mobile {
    background-color: #1cc88a; /* მწვანე */
}

.progress-bar-tablet {
    background-color: #36b9cc; /* ცისფერი */
}

/* ცხრილის დამატებითი სტილები */
.device-stats-table th {
    white-space: nowrap;
    padding: 12px 15px;
}

.device-stats-table td {
    padding: 12px 15px;
}

.device-stats-table .table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.device-stats-table .total-row td {
    border-top: 1px solid #dee2e6;
    padding-top: 10px;
    padding-bottom: 10px;
}


.limited-form input[type="number"] {
    width: 32px;
    padding: 1px 2px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.limited-form button {
    padding: 0 3px;
    height: 18px;
    font-size: 11px;
    border-radius: 4px;
}
.limited-form button:hover {
    background: #d7f7e8;
}


.alert.alert-danger {
    background: #ffdede;
    border: 1px solid #ff6464;
    color: #a33;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    font-family: inherit;
    display: block;
}


.admin-users-table th {text-align:center;}
.admin-users-table td {padding: 5px;font-size: 15px;text-align:center;}

.qrcode { display: flex; justify-content:center;flex-direction:column;align-items: center;}
#qr-code { margin: 15px 0 10px 0; text-align:center; }
#download-qr-btn { border-radius:5px; padding:7px 13px; cursor:pointer; font-size:14px; }



.qrcustom-modal {
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.23); z-index:10001;
  display: flex; align-items: center; justify-content: center;
}
.qrcustom-modal .qrmodal-content {
  background: #fff;
  border-radius: 14px;
  padding: 25px 20px 20px 20px;
  max-width: 400px;
  margin: auto;
  box-shadow: 0 2px 20px rgba(0,0,0,.12);
}
.qrmodal-btn { margin: 6px 2px 0 2px; padding:8px 16px; border-radius:4px; border:none; cursor:pointer; }
.qrconfirm-btn { color:#fff;font-size: 16px; font-family: 'markbold'; background:#017d41;}
.qrcancel-btn { color:#333333;font-size: 16px; font-family: 'markbold'; background:#e5e5e5;  }





.status-card{display:flex;align-items:center;padding:12px 16px;
             border:1px solid #e0e0e0;border-radius:8px;background:#fff;
             gap:12px;margin: 0 0 50px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);}
             
.status-card .label {font-weight:600;font-size:1.1rem;font-family:'markbold';display:inline-block}

.status-card .desc {font-size:.85rem;color:#6c757d;margin-top:2px}

.badge{padding:2px 8px 3px 8px;border-radius:10px;font-size:12px; font-weight:500;margin-left:5px}

.badge-success{background:#28a745;color:#fff}

.badge-warning{background:#ffc107;color:#212529}






    #recover-content {
        height: 60vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .recover-request {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 500px;
    }
    
    .form-group {
            margin-bottom: 1rem;
        }


    .form-group input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
        transition: border 0.3s;
    }



    .form-group input:focus {
    border-color: #FCD217;
    outline: none;
    }





.user-search-form input[type="text"] {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    transition: border-color 0.3s !important;
}

.user-search-form input[type="text"]:focus {
    border-color: #4CAF50 !important;
    outline: none !important;
}