/* =========================================================
   🚀 DRIVEHUB PREMIUM MASTER STYLESHEET
   Separated for maximum site speed and code organization.
   Handles both upload-file and upload-link pages.
   ========================================================= */

/* --- GLOBAL THEME & RESET --- */
:root {
    --drivehub-primary: #4b49ac; /* Theme Blue */
    --drivehub-hover: #1e1e2d; /* Hover Dark */
    --pd-red: #ff4747; /* Error/Delete Red */
    --card-shadow: 0 4px 6px rgba(0,0,0,0.03);
    --hover-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

a:focus { color: var(--drivehub-primary) !important; text-decoration: none; }
body { color: #333; }
.container, .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }

/* --- CARD & INTERFACE STYLING --- */
.card { border-radius: 12px; border: none; box-shadow: var(--card-shadow); transition: all 0.3s ease; }
.card-body { padding: 1.5rem; }

/* --- TABLE DESIGN (Shared Files Match) --- */
#myTable { border-collapse: separate; border-spacing: 0; margin-top: 5px; }
#myTable thead th { 
    background-color: var(--drivehub-hover); color: #ffffff; 
    border-bottom: none; font-weight: 600; padding: 12px 10px; 
}
#myTable thead th:first-child { border-top-left-radius: 6px; }
#myTable thead th:last-child { border-top-right-radius: 6px; }
#myTable tbody tr { background: #fff; border-bottom: 1px solid #eaecf4; transition: 0.3s ease; }
#myTable tbody tr:hover { background-color: #f8faff; }
#myTable tbody td { padding: 12px 10px; vertical-align: middle; border-top: 1px solid #eaecf4; }

/* --- MODERN CHECKBOXES & INPUTS --- */
#myTable input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: var(--drivehub-primary) !important; border-radius: 3px;
}
.vip-textarea {
    border-radius: 8px; border: 1px solid #d1d9e6; padding: 15px; font-size: 13.5px;
    color: #333; font-weight: 600; transition: 0.3s ease; resize: none; background: #f8faff;
}
.vip-textarea:focus {
    border-color: var(--drivehub-primary); background: #fff;
    box-shadow: 0 0 0 0.2rem rgba(75, 73, 172, 0.1); outline: none;
}
.copy-link { 
    border-radius: 6px; border: 1px solid #d1d9e6; background: #f8faff !important; 
    font-weight: 600; font-size: 13.5px; color: #444; padding: 10px;
}
.copy-link:focus { border-color: var(--drivehub-primary); outline: none; }
.copy-link::selection { background: var(--drivehub-primary); color: #fff; }

/* --- BADGES & TAGS --- */
.size-badge {
    background: #f1f3f5; color: #383d41; padding: 4px 8px; 
    border-radius: 4px; font-size: 10.5px; font-weight: 600; border: 1px solid #e2e3e5;
}
.link-duplicate-badge {
    background:#fff8e5; color:#f39c12; font-weight:bold; font-size:11.5px; 
    padding:6px 12px; border-radius:20px;
}

/* --- ACTION BUTTONS (Perfect 30x30 Squares like Shared Files) --- */
.action-square { 
    width: 30px; height: 30px; line-height: 30px; text-align: center; 
    border-radius: 4px; border: none; font-size: 11.5px; color: #fff;
    display: inline-flex; justify-content: center; align-items: center; 
    margin-right: 4px; transition: 0.3s; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.action-square i { color: #ffffff !important; }
.action-square:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); color:#fff; }
.btn-c-copy { background-color: #343a40; }
.btn-c-open { background-color: #17a2b8; }
.btn-c-del  { background-color: var(--pd-red); }

/* Drive Delete Button (32x32) */
.btn-drive-del {
    background: #ffe5e5; color: var(--pd-red); border: none; border-radius: 6px;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    transition: 0.3s; cursor: pointer;
}
.btn-drive-del:hover { background: var(--pd-red); color: #fff; transform: scale(1.05); }

/* Generated Link Results Card */
.generated-link-card {
    background: #fff; border: 1px solid #e2e3e5; padding: 15px; 
    border-radius: 8px; margin-bottom: 15px; text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: 0.3s;
}
.generated-link-card:hover { background-color: #f8faff; border-color: #d1d9e6; }

/* ========================================================
   🔥 INTERACTIVE 3D ANIMATED VIP BUTTONS
   ======================================================== */

/* Main Submit Button (Generate Link) */
.btn-generate-vip {
    border-radius: 6px; font-weight: 600; background-color: var(--drivehub-primary); color:white; 
    border: none; padding: 10px 25px; font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer;
}
.btn-generate-vip i { transition: transform 0.3s ease; }
.btn-generate-vip:hover { 
    background-color: var(--drivehub-hover); transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(30, 30, 45, 0.25); color: white; 
}
.btn-generate-vip:hover i { transform: scale(1.1) rotate(5deg); } 
.btn-generate-vip:active { transform: translateY(0) scale(0.96); box-shadow: 0 2px 4px rgba(30,30,45,0.15); }

/* --- 🔥 PROCESSING STATE: Blue/Cyan Gradient + Inner Shadow from Image --- */
.btn-generate-vip.vip-btn-active {
    background-image: linear-gradient(135deg, #4b49ac 0%, #00c6ff 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    pointer-events: none; /* Deactivates link */
    cursor: progress;
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.3) !important; /* Inner shadow for depth */
    border: none;
    transition: none;
}
.btn-generate-vip.vip-btn-active i { color: #ffffff !important; animation: none !important; }

/* Global processing fallback */
.btn-generate-vip.btn-processing {
    background-color: #4b49ac !important;
    pointer-events: none;
    cursor: progress;
    opacity: 0.8;
}

/* Secondary Buttons (Clear Selection) */
.btn-clear-vip {
    background-color: #fff; color: var(--pd-red); border: 1px solid var(--pd-red); border-radius: 6px;
    font-weight: 600; font-size: 13px; padding: 8px 20px; display: inline-flex; align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.02); cursor: pointer;
}
.btn-clear-vip i { transition: transform 0.3s ease; }
.btn-clear-vip:hover {
    background-color: var(--pd-red); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(255,71,87,0.2);
}
.btn-clear-vip:hover i { transform: rotate(90deg); } /* Cross rotates */
.btn-clear-vip:active { transform: translateY(0) scale(0.96); box-shadow: 0 2px 4px rgba(255,71,87,0.1); }

/* 🔙 BACK BUTTON */
.btn-back {
    background-color: #f8faff; color: var(--drivehub-hover); border: 1px solid #d1d9e6; border-radius: 6px;
    font-weight: 600; font-size: 13px; padding: 8px 20px; display: inline-flex; align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    cursor: pointer; text-decoration: none !important;
}
.btn-back i { transition: transform 0.3s ease; }
.btn-back:hover { 
    background-color: var(--drivehub-hover); color: #ffffff !important; border-color: var(--drivehub-hover);
    transform: translateY(-2px); box-shadow: 0 6px 12px rgba(30, 30, 45, 0.2); 
}
.btn-back:hover i { transform: translateX(-4px); } /* Arrow moves Left */
.btn-back:active { transform: translateY(0) scale(0.96); box-shadow: 0 2px 4px rgba(30,30,45,0.1); }

/* 🔄 LOAD MORE BUTTON */
.btn-load-more {
    background-color: #f8faff; color: var(--drivehub-hover); border: 1px solid #d1d9e6; border-radius: 6px;
    font-weight: 600; font-size: 13px; padding: 8px 20px; display: inline-flex; align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    text-decoration: none !important; cursor: pointer;
}
.btn-load-more i { transition: transform 0.3s ease; }
.btn-load-more:hover { 
    background-color: var(--drivehub-hover); color: #ffffff !important; border-color: var(--drivehub-hover);
    transform: translateY(-2px); box-shadow: 0 6px 12px rgba(30, 30, 45, 0.2); 
}
.btn-load-more:hover i { transform: translateX(4px); } /* Arrow moves Right */
.btn-load-more:active { transform: translateY(0) scale(0.96); box-shadow: 0 2px 4px rgba(30,30,45,0.1); }

/* =========================================================
   🚀 DOWNLOAD PAGE (DOWNLOAD.PHP)
   Premium Rounded Box Theme & Mirror Buttons
   ========================================================= */

.dl-page-container {
    padding: 0px 15px 15px 15px; /* Upar ki padding zero kar di */
    margin-top: -8px; /* Box ko 20px upar kheench liya */
    display: flex; justify-content: center;
    align-items: flex-start; min-height: auto; width: 100%;
}

.dl-giant-box {
    background: #ffffff; width: 100%; border-radius: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); padding: 25px 40px; 
    border: 1px solid #eaecf0;
}

.dl-header {
    text-align: center; font-size: 22px; font-weight: 800;
    color: #3a3b45; margin-bottom: 15px; display: flex;
    align-items: center; justify-content: center; gap: 10px;
}
.dl-header i { color: #4e73df; font-size: 26px; }

/* Info Table Styling */
.info-table-wrapper {
    max-width: 800px; margin: 0 auto 20px auto; background: #fdfdfe;
    border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden;
}
.info-row {
    display: flex; padding: 10px 20px; border-bottom: 1px solid #eaecf0;
    font-size: 14px; color: #5a5c69;
}
.info-row:last-child { border-bottom: none; }
.info-key { font-weight: 800; color: #3a3b45; width: 140px; flex-shrink: 0; }
.info-val { font-weight: 600; word-break: break-word; }
.info-link { color: #4e73df; text-decoration: none; font-weight: 700; }
.info-link:hover { text-decoration: underline; }

.dl-note {
    text-align: center; font-size: 13.5px; font-weight: 800;
    color: #858796; margin-bottom: 15px; text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mirror Buttons Stack */
.btn-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.btn-mirror {
    width: 100%; max-width: 400px; padding: 12px 20px; border-radius: 8px; 
    font-size: 13.5px; font-weight: 800; text-align: center;
    text-transform: uppercase; text-decoration: none !important;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    border: none; transition: 0.2s ease; color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.btn-mirror:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.btn-mirror i { font-size: 16px; }

/* Mirror Button Colors */
.btn-stream { background: #e3000f; } 
.btn-login { background: #007bff; } 
.btn-gphotos { background: #ef4444; } 
.btn-pixeldrain { background: #28a745; } 
.btn-telegram { background: #ffc107; color: #000 !important; } 
.btn-gofile { background: #111827; } 
.btn-r2 { background: #f97316; } 
.btn-uploadhub { background: #8b5cf6; } 
.btn-filepress { background: #64748b; } 

.pulse-vibe { animation: pulseAnim 2s infinite; }
@keyframes pulseAnim {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Copy Link Area */
.copy-area { margin-top: 25px; text-align: center; max-width: 500px; margin-left: auto; margin-right: auto; }
.copy-text { font-size: 12.5px; color: #858796; margin-bottom: 10px; font-weight: 700; }
.copy-bar { display: flex; background: #f8f9fc; border: 1px solid #d1d3e2; border-radius: 8px; overflow: hidden; }
.copy-bar input { flex: 1; border: none; padding: 10px 15px; outline: none; color: #5a5c69; font-size: 13px; text-align: center; font-weight: 700; background: transparent; }
.copy-bar button { background: #4e73df; color: #fff; border: none; padding: 0 25px; font-weight: 800; cursor: pointer; transition: 0.3s; font-size: 13px; text-transform: uppercase; }
.copy-bar button:hover { background: #2e59d9; }

/* Mobile Responsiveness */
@media (max-width: 768px) { 
    .dl-giant-box { padding: 20px 15px; border-radius: 12px; }
    .info-row { flex-direction: column; gap: 4px; padding: 8px 15px; }
    .info-key { width: 100%; font-size: 13px; color: #858796; }
}

/* ========================================= */
/* ? GLOBAL HEADER & SIDEBAR CSS ?         */
/* ========================================= */
body { background-color: #f8f9fc; }

#accordionSidebar { background: #1e1e2d !important; border-right: none; }
#accordionSidebar .nav-item .nav-link { color: #8b92a5 !important; padding: 15px 20px; border-bottom: 1px solid #27293d; transition: 0.3s ease; }
#accordionSidebar .nav-item .nav-link i { color: #8b92a5 !important; }
#accordionSidebar .nav-item .nav-link:hover { background-color: #27293d !important; color: #ffffff !important; }
#accordionSidebar .nav-item.active .nav-link { background-color: #27293d !important; color: #00f2fe !important; border-left: 4px solid #00f2fe !important; }
#accordionSidebar .nav-item.active .nav-link i { color: #00f2fe !important; }

.sidebar-brand { background: #151521 !important; color: white !important; padding: 25px 0 !important; }
.sidebar-brand-icon i { color: #00f2fe !important; }
.topbar { background: #ffffff !important; box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important; }
.sidebar-heading { color: #5a5c69 !important; font-weight: 800; letter-spacing: 1px; }
.Blink { animation: blinker 0.3s cubic-bezier(.5, 0, 1, 1) infinite alternate; }
@keyframes blinker { from { opacity: 1; } to { opacity: 0; } }

/* ? UPFILEHUB CSS LOGO ? */
.brand-logo-custom { display: flex; align-items: center; font-family: 'Nunito', sans-serif; text-decoration: none !important; margin-left: 10px; }
.brand-icon-wrapper { background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); color: white; height: 35px; width: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 10px; box-shadow: 0 4px 10px rgba(79, 172, 254, 0.4); transition: transform 0.3s; }
.brand-logo-custom:hover .brand-icon-wrapper { transform: translateY(-2px) scale(1.05); }
.brand-text-custom { font-size: 22px; font-weight: 900; color: #1e1e2d; letter-spacing: -0.5px; }
.brand-text-custom span { color: #4facfe; }

/* ? INTEGRATION LOGOS ? */
.header-integrations { display: flex; align-items: center; gap: 24px; margin-right: 25px; }
.header-integrations img { height: 32px; width: 32px; object-fit: contain; transition: transform 0.3s ease-in-out; border-radius: 4px; cursor: default; }
.header-integrations img:hover { transform: translateY(-4px) scale(1.15); }
@media (max-width: 768px) { .header-integrations { display: none !important; } }

/* ========================================= */
/* ? LOGGED-IN DASHBOARD CSS ?             */
/* ========================================= */
.card { border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
.border-left-primary { border-left: 4px solid #4facfe !important; }
.border-left-success { border-left: 4px solid #43e97b !important; }
.border-left-danger  { border-left: 4px solid #ff0844 !important; }
.border-left-warning { border-left: 4px solid #f9a826 !important; }
.text-primary { color: #4facfe !important; }
.text-success { color: #43e97b !important; }
.text-danger  { color: #ff0844 !important; }
.text-warning { color: #f9a826 !important; }

/* ========================================= */
/* ? PUBLIC HOME PAGE CSS (LOGGED OUT) ?   */
/* ========================================= */
.public-sidebar { width: 100px; background-color: #1e1e2d; display: flex; flex-direction: column; align-items: center; padding-top: 15px; position: fixed; height: 100vh; top:0; left:0; z-index: 100;}
.public-sidebar-brand { color: white; font-size: 24px; margin-bottom: 30px; text-decoration: none;}
.public-sidebar-brand:hover { color: #fff; }
.public-nav-item { width: 100%; text-align: center; margin-bottom: 15px; }
.public-nav-link { color: #8a8d93; display: flex; flex-direction: column; align-items: center; font-size: 11px; text-decoration: none; padding: 15px 0; border-left: 3px solid transparent; transition: 0.3s;}
.public-nav-link i { font-size: 20px; margin-bottom: 5px; }
.public-nav-link:hover, .public-nav-link.active { color: #fff; background: rgba(255,255,255,0.05); border-left-color: #4facfe; text-decoration: none;}

.public-content-wrapper { margin-left: 100px; display: flex; flex-direction: column; min-height: 100vh !important; background-color: #f8f9fc; }
.public-main-body { padding: 15px 30px 0px 30px; display: flex; flex-direction: column; align-items: center; flex: 1; }

footer.sticky-footer { background-color: transparent !important; background: none !important; border-top: none !important; margin-top: auto !important; padding-top: 5px !important; padding-bottom: 20px !important;}

.hero-section { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); padding: 25px 20px; text-align: center; margin-bottom: 25px; border: 1px solid #eaecf4; width: 100%; max-width: 900px;}
.hero-section h2 { font-weight: 800; color: #3a3b45; font-size: 24px; margin-bottom: 8px; }
.hero-section p { color: #6e707e; font-size: 13px; max-width: 650px; margin: 0 auto 15px auto; line-height: 1.5; }
.btn-get-started-themed { background-color: #4facfe; color: white; font-weight: 800; padding: 12px 35px; border-radius: 50px; font-size: 14px; letter-spacing: 0.5px; transition: 0.3s; box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3); border: none; }
.btn-get-started-themed:hover { background-color: #2e59d9; color: white; transform: translateY(-3px); text-decoration: none; }

.banner-card-compact { background-color: #ffffff; border-radius: 10px; padding: 18px 20px; display: flex; align-items: center; box-shadow: 0 3px 10px rgba(0,0,0,0.02); transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #eaecf4; height: 100%;}
.banner-card-compact:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.icon-box { font-size: 30px; min-width: 50px; text-align: center; margin-right: 15px;}
.text-box h6 { font-weight: 800; color: #3a3b45; font-size: 14px; margin-bottom: 3px; }
.text-box p { color: #858796; font-size: 12px; line-height: 1.3; margin-bottom: 0; }

.feature-card-compact { background-color: #ffffff; border-radius: 10px; padding: 20px 10px; text-align: center; height: 100%; box-shadow: 0 3px 10px rgba(0,0,0,0.02); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eaecf4; }
.feature-card-compact:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.icon-circle-compact { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto; font-size: 20px; }

.bg-soft-green { background: #e3fbec; color: #1cc88a; }
.bg-soft-yellow { background: #fef5db; color: #f6c23e; }
.bg-soft-blue { background: #ebf0fd; color: #4e73df; }
.bg-soft-red { background: #fdeced; color: #e74a3b; }
.feature-card-compact h6 { font-weight: 800; color: #3a3b45; font-size: 13px; margin-bottom: 5px; }
.feature-card-compact p { color: #858796; font-size: 12px; line-height: 1.3; margin-bottom: 0; }

@media (max-width: 768px) {
    .public-sidebar { width: 70px; }
    .public-content-wrapper { margin-left: 70px; }
    .public-sidebar-brand { font-size: 18px; }
    .public-nav-link { font-size: 9px; padding: 10px 0;}
    .public-main-body { padding: 15px; }
}

/* ? UNIFIED SIDEBAR & TOPBAR CSS ? */
body { background-color: #f8f9fc; }

#accordionSidebar { background: #1e1e2d !important; border-right: none; z-index: 1050 !important; position: relative !important; }
#accordionSidebar .sidebar-brand { height: 70px !important; padding: 15px 0 !important; margin-bottom: 10px !important; background: transparent !important; }
#accordionSidebar .sidebar-brand-icon i { font-size: 24px !important; color: white !important; }
#accordionSidebar .sidebar-brand-text { display: none !important; }
#accordionSidebar .nav-item { position: relative !important; z-index: 1051 !important; width:100%; }
#accordionSidebar .nav-item .nav-link { color: #8a8d93 !important; border-bottom: none !important; border-left: 3px solid transparent !important; transition: 0.3s ease; pointer-events: auto !important; }
#accordionSidebar .nav-item.active, #accordionSidebar .nav-item.active .nav-link { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; }
#accordionSidebar .nav-item .nav-link:hover { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; border-left-color: #4facfe !important; }
#accordionSidebar .nav-item.active .nav-link { color: #ffffff !important; border-left-color: #4facfe !important; }
#accordionSidebar .nav-item .nav-link:hover i, #accordionSidebar .nav-item.active .nav-link i { color: #4facfe !important; }
#accordionSidebar.toggled .nav-item .nav-link { display: flex; flex-direction: column; align-items: center; font-size: 11px; padding: 15px 0 !important; text-align: center; }
#accordionSidebar.toggled .nav-item .nav-link i { font-size: 20px !important; margin-bottom: 5px; }
#accordionSidebar:not(.toggled) .nav-item .nav-link { padding: 15px 20px !important; display: flex; flex-direction: row; align-items: center; font-size: 14px; }
#accordionSidebar:not(.toggled) .nav-item .nav-link i { margin-right: 15px; margin-bottom: 0; font-size: 18px !important; }

.topbar { background: #ffffff !important; box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important; height: 70px !important; }
.brand-logo-custom { display: flex; align-items: center; font-family: 'Nunito', sans-serif; text-decoration: none !important; }
.brand-icon-wrapper { background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); color: white; height: 35px; width: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 10px; box-shadow: 0 4px 10px rgba(79, 172, 254, 0.4); transition: transform 0.3s; }
.brand-logo-custom:hover .brand-icon-wrapper { transform: translateY(-2px) scale(1.05); }
.brand-text-custom { font-size: 22px; font-weight: 900; color: #1e1e2d; letter-spacing: -0.5px; }
.brand-text-custom span { color: #4facfe; }
.header-integrations { display: flex; align-items: center; gap: 24px; }
.header-integrations img { height: 32px; width: 32px; object-fit: contain; transition: transform 0.3s ease-in-out; border-radius: 4px; cursor: default; }
.header-integrations img:hover { transform: translateY(-4px) scale(1.15); }

/* ? LOGIN PAGE SPECIFIC CSS ? */
.main-body { flex: 1; padding: 40px; display: flex; flex-direction: column; align-items: center; }
.manual-card-container { background: #ffffff; padding: 40px 35px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eaecf4; width: 100%; max-width: 420px; display: block; position: relative; z-index: 5;}
.form-control-user { height: 48px; border-radius: 8px; border: 2px solid #eaeaea; font-size: 14px; color: #333; font-weight: 500; }
.form-control-user:focus { border-color: #4facfe; box-shadow: none; }

.btn-signin { background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%); color: white; font-weight: 800; height: 50px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid #3ca0e5; width: 100%; box-shadow: 0 4px 6px rgba(79, 172, 254, 0.3), inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.2); letter-spacing: 0.5px; }
.btn-signin:hover { background: linear-gradient(180deg, #00f2fe 0%, #4facfe 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(79, 172, 254, 0.4), inset 0 1px 0 rgba(255,255,255,0.4); color: white; }
.btn-signin:active { transform: translateY(1px); box-shadow: 0 2px 3px rgba(79, 172, 254, 0.3), inset 0 2px 4px rgba(0,0,0,0.1); }

.divider { text-align: center; margin: 25px 0; position: relative; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: #eaeaea; }
.divider::before { left: 0; } .divider::after { right: 0; }
.divider span { background: white; padding: 0 10px; color: #888; font-weight: 700; font-size: 12px; }

.btn-rclone { background: linear-gradient(180deg, #ff4757 0%, #ff6b81 100%); color: white; font-weight: 800; border-radius: 8px; padding: 12px 0; font-size: 14px; transition: all 0.3s ease; border: 1px solid #e84150; width: 100%; box-shadow: 0 4px 6px rgba(255, 71, 87, 0.3), inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.2); letter-spacing: 0.5px; }
.btn-rclone:hover { background: linear-gradient(180deg, #ff6b81 0%, #ff4757 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(255, 71, 87, 0.4), inset 0 1px 0 rgba(255,255,255,0.4); color: white; }
.btn-rclone:active { transform: translateY(1px); box-shadow: 0 2px 3px rgba(255, 71, 87, 0.3), inset 0 2px 4px rgba(0,0,0,0.1); }

.magic-split-container { background: #ffffff; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); border: 1px solid #eaecf4; width: 100%; max-width: 1000px; display: none; overflow: hidden; position: relative; z-index: 5;}
.magic-left-side { padding: 40px; display: flex; flex-direction: column; justify-content: center;}
.magic-right-side { background-color: #f1f3f9; padding: 20px; display: flex; align-items: center; justify-content: center; position: relative; }

.btn-generate { background: linear-gradient(180deg, #ff4757 0%, #ff6b81 100%); color: white; font-weight: 800; border-radius: 8px; padding: 12px 0; transition: all 0.3s ease; border: 1px solid #e84150; font-size: 14px; width: 100%; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(255, 71, 87, 0.3), inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.btn-generate:hover { background: linear-gradient(180deg, #ff6b81 0%, #ff4757 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(255, 71, 87, 0.4), inset 0 1px 0 rgba(255,255,255,0.4); color: white; }

.steps-guide { background: #f8f9fc; padding: 15px 20px; border-radius: 8px; border: 1px dashed #d1d3e2; margin-bottom: 20px;}
.step-item { font-size: 12px; color: #555; margin-bottom: 12px; display: flex; align-items: flex-start; }
.step-num { background: #1e1e2d; color: #fff; min-width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; margin-right: 10px;}

.slider-wrapper { position: relative; width: 100%; height: 450px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: #fff; }
.guide-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease-in-out; cursor: zoom-in; }
.guide-slide.active { opacity: 1; z-index: 2; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 10px 15px; border-radius: 5px; z-index: 10; cursor:pointer;}
.slider-prev { left: 10px; } .slider-next { right: 10px; }

.custom-lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
.lightbox-content { position: relative; max-width: 800px; width: 95%; text-align: center; }
.lightbox-img { width: 100%; height: auto; max-height: 90vh; border-radius: 8px; object-fit: contain; background: #fff;}
.lightbox-close { position: absolute; top: -40px; right: 0; color: white; font-size: 35px; font-weight: bold; cursor: pointer;}
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-arrow:hover { background: #ff3e5b; }
.lb-prev { left: -60px; } .lb-next { right: -60px; }

.features-section { display: flex; gap: 25px; margin-top: 60px; max-width: 1000px; width: 100%; flex-wrap: wrap; justify-content: center; position: relative; z-index: 5;}
.feature-box { background: #fff; padding: 30px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #eaecf4; flex: 1; min-width: 250px; text-align: center; transition: 0.3s; }
.feature-box:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: #4facfe; }
.feature-icon { width: 60px; height: 60px; background: rgba(79, 172, 254, 0.1); color: #4facfe; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 15px; }
.feature-box h6 { font-weight: bold; color: #1e1e2d; margin-bottom: 10px; }
.feature-box p { font-size: 13px; color: #6c757d; margin: 0; }

.site-footer { text-align: center; padding: 30px; margin-top: auto; color: #858796; font-size: 13px; position: relative; z-index: 100; pointer-events: auto;}
.site-footer a { color: #4facfe; text-decoration: none; margin: 0 5px; font-weight: 600; position: relative; z-index: 101;}
.site-footer a:hover { text-decoration: underline; color: #2e59d9; }

@media (max-width: 768px) { 
    .header-integrations { display: none !important; } 
    #accordionSidebar.toggled .nav-item .nav-link { padding-left: 2px !important; padding-right: 2px !important; font-size: 10px !important; }
    #accordionSidebar:not(.toggled) .nav-item .nav-link { padding-left: 10px !important; }
    #accordionSidebar:not(.toggled) .nav-item .nav-link i { margin-right: 10px !important; }
}

/* ? ABSOLUTE CENTER LOGO FOR MOBILE ? */
@media (max-width: 768px) {
    /* Topbar ko flex bana kar center justify karna */
    nav.navbar.topbar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        padding: 0 !important;
    }

    /* Logo ko kisi bhi cheez ki parwah kiye baghair center mein ghusa dena */
    .brand-logo-custom {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        display: flex !important;
        z-index: 999 !important;
    }

    /* Hamburger menu ko kinaray par phenk dena taake wo logo ko touch na kare */
    #sidebarToggleTop {
        position: absolute !important;
        left: 10px !important;
        z-index: 1000 !important;
        margin: 0 !important;
    }

    /* Mobile par faltu cheezein gayab */
    .header-integrations { display: none !important; }
}