/**
 * ToolSmartly - Custom CSS (Bootstrap Based)
 * Minimal customizations on top of Bootstrap
 */

/* ==========================================
   Variables & Typography
   ========================================== */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bs-primary: #6366F1;
  --bs-primary-rgb: 99, 102, 241;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* ==========================================
   Gradient Text
   ========================================== */
.gradient-text {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* ==========================================
   Tool Cards
   ========================================== */
.tool-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--bs-primary);
}

.tool-icon {
    flex-shrink: 0;
}

/* ==========================================
   Category Cards
   ========================================== */
.category-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--bs-primary);
}

/* ==========================================
   Upload Zone
   ========================================== */
.border-dashed {
    border-style: dashed !important;
}

.upload-zone {
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(99, 102, 241, 0.05) !important;
}

/* ==========================================
   Footer Links
   ========================================== */
.hover-link:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline !important;
}

/* ==========================================
   Navbar
   ========================================== */
.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ==========================================
   Smooth Scroll
   ========================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   Animations
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease;
}

/* ==========================================
   Responsive Utilities
   ========================================== */
@media (max-width: 768px) {
    .display-3 {
        font-size: 2.5rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
    .navbar,
    .footer,
    .btn {
        display: none;
    }
}


footer.bg-dark .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* =========================================
   Floating Share Buttons
========================================= */

.floating-share{
position:fixed;
right:20px;
bottom:120px;
display:flex;
flex-direction:column;
gap:12px;
z-index:999;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}

.share-btn{
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
border:none;
cursor:pointer;
box-shadow:0 4px 12px rgba(0,0,0,.15);
transition:all .25s ease;
}

.share-btn:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.share-copy{background:#6366f1;}
.share-x{background:#000;}
.share-facebook{background:#1877f2;}
.share-linkedin{background:#0a66c2;}
.share-reddit{background:#ff4500;}

.share-btn i{
pointer-events:none;
}


/* Toast */

.share-toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
padding:10px 18px;
border-radius:30px;
font-size:14px;
opacity:0;
transition:opacity .3s ease;
z-index:1000;
}

.share-toast.show{
opacity:1;
}



/* Mobile */

@media (max-width:768px){

.floating-share{
right:10px;
bottom:90px;
}

.share-btn{
width:40px;
height:40px;
font-size:16px;
}

}


.howto-toggle{
  font-weight:700;
  color:#6366F1;
  border:none;
  background:none;
  cursor:pointer;
  font-size:1rem;
}

.howto-toggle:hover{
  text-decoration:underline;
}

.faq-toggle{
font-weight:600;
color:#6366F1;
border:none;
background:none;
cursor:pointer;
font-size:0.9rem;
}

.faq-toggle:hover{
text-decoration:underline;
}