/* ============================================
   SUPERVISORS FOR SUPERVISEES - COMPLETE CSS
   ============================================ */

/* Reset & Base */
html,body{height:100%;margin:0;padding:0;font-family:'Poppins',sans-serif;background:#FFFFFF;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
*{box-sizing:border-box;}

/* ============ LOGIN PAGE ============ */
.sv-figma-page{position:relative;min-height:100vh;background:#FFFFFF;}

.sv-topbar{position:relative;width:100%;height:136px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.sv-topbar .brand{font-weight:500;font-size:34px;color:#DE348A;letter-spacing:0.2px;}

.sv-header-rect{position:relative;width:100%;height:230px;background:#EFF0F2;display:flex;align-items:center;justify-content:center}

.sv-login-title{font-size:64px;font-weight:700;color:#021526;margin-top:-90px;line-height:1}
.sv-swash{width:188.92px;height:7.55px;border:3px solid #DE348A;transform:rotate(2.14deg);margin:18px auto 28px;}

.sv-card{box-sizing:border-box;width:667px;max-width:94%;background:#FFFFFF;border:1.5px solid #EAEAEA;border-radius:25px;padding:48px 44px;margin:-120px auto 40px;position:relative;box-shadow:0px 66px 26px rgba(0,0,0,0.01),0px 37px 22px rgba(0,0,0,0.03),0px 16px 16px rgba(0,0,0,0.04),0px 4px 9px rgba(0,0,0,0.05);}

.sv-field{margin-bottom:24px}
.sv-field label{display:block;font-size:21px;color:#2E2E2E;margin-bottom:8px;font-weight:400}
.sv-input{width:100%;padding:12px 12px;border:0;border-bottom:1px solid #B4B4B4;font-size:16px;outline:none;color:#000;border-radius:4px;background:transparent;font-family:'Poppins',sans-serif;}
.sv-input::placeholder{color:rgba(0,0,0,0.25)}
.sv-input:focus{box-shadow:0 0 0 3px rgba(222,52,138,0.08);border-bottom-color:#DE348A;}

textarea.sv-input{border:1px solid #B4B4B4;padding:12px;border-radius:8px;resize:vertical;}

.sv-small{font-size:15px;color:rgba(0,0,0,0.6)}
.sv-forgot{display:block;text-align:right;margin-top:-8px;font-size:15.8px;color:#2E2E2E;text-decoration:none;transition:color 0.3s;}
.sv-forgot:hover{color:#DE348A;}

.sv-eye{position:absolute;right:20px;top:calc(50% - 14px);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:none;font-size:20px;transition:transform 0.3s;}
.sv-eye:hover{transform:scale(1.1);}

.sv-cta{width:100%;background:#DE348A;color:#fff;border:none;padding:14px;border-radius:44px;font-weight:700;font-size:21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:all 0.3s;font-family:'Poppins',sans-serif;}
.sv-cta:hover{background:#C92F7A;transform:translateY(-2px);box-shadow:0 8px 20px rgba(222,52,138,0.3);}
.sv-cta:disabled{opacity:0.6;cursor:not-allowed;}

.sv-register-hint{margin-top:14px;text-align:center;color:#000;font-size:15px;}
.sv-register-hint a{color:#DE348A;font-weight:700;text-decoration:none;}

.sv-msg{padding:12px;border-radius:8px;margin-top:12px;text-align:center;font-size:15px;}
.sv-msg.error{background:#ffecec;border:1px solid #f5c2c2;color:#c93636;}
.sv-msg.success{background:#e8f8ed;border:1px solid #b6e7c7;color:#2d7a4a;}

.sv-footer{background:#1B1819;color:#fff;padding:48px 20px;margin-top:60px;text-align:center}
.sv-footer .nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.sv-footer .nav a{color:#fff;text-decoration:none;transition:opacity 0.3s;}
.sv-footer .nav a:hover{opacity:0.7;}
.sv-footer .rights{color:rgba(255,255,255,0.25);font-size:16px}

/* ============ DIRECTORY PAGE ============ */
.sv-directory-page{font-family:'Poppins',sans-serif;background:#FFFFFF;min-height:100vh;}

.sv-top-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 60px;background:#FFF;border-bottom:1px solid #F0F0F0;}
.sv-nav-brand{font-size:24px;font-weight:500;color:#DE348A;}
.sv-nav-links{display:flex;gap:30px;}
.sv-nav-links a{color:#333;text-decoration:none;font-size:16px;transition:color 0.3s;position:relative;}
.sv-nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#DE348A;transition:width 0.3s;}
.sv-nav-links a:hover{color:#DE348A;}
.sv-nav-links a:hover::after{width:100%;}

.sv-hero-section{background:linear-gradient(135deg,#EFF0F2 0%,#F8F9FA 100%);padding:80px 20px;text-align:center;position:relative;overflow:hidden;}
.sv-hero-section::before{content:'';position:absolute;top:-50%;left:-10%;width:40%;height:200%;background:radial-gradient(circle,rgba(222,52,138,0.05) 0%,transparent 70%);animation:float 8s ease-in-out infinite;}
.sv-hero-title{font-size:56px;font-weight:700;color:#021526;margin:0;position:relative;z-index:1;}
.sv-hero-underline{width:280px;height:6px;background:#DE348A;margin:20px auto;border-radius:3px;position:relative;z-index:1;}

.sv-search-container{max-width:1200px;margin:-60px auto 60px;padding:0 20px;position:relative;z-index:10;}
.sv-search-form{background:#FFF;border-radius:30px;box-shadow:0 20px 60px rgba(0,0,0,0.12);padding:30px 40px;animation:slideUp 0.6s ease-out;}
.sv-filter-group{display:flex;gap:20px;align-items:end;flex-wrap:wrap;}
.sv-filter-item{flex:1;min-width:200px;}
.sv-filter-icon{display:block;font-size:14px;color:#666;margin-bottom:8px;font-weight:500;}
.sv-filter-select{width:100%;padding:14px 18px;border:1.5px solid #E0E0E0;border-radius:12px;font-size:15px;outline:none;transition:all 0.3s;font-family:'Poppins',sans-serif;background:#FFF;}
.sv-filter-select:focus{border-color:#DE348A;box-shadow:0 0 0 3px rgba(222,52,138,0.1);transform:translateY(-2px);}
.sv-search-btn{background:linear-gradient(135deg,#DE348A 0%,#C92F7A 100%);color:#FFF;border:none;padding:14px 40px;border-radius:50px;font-weight:600;font-size:16px;cursor:pointer;transition:all 0.3s;min-width:140px;box-shadow:0 4px 15px rgba(222,52,138,0.3);}
.sv-search-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(222,52,138,0.4);}

.sv-results-wrapper{max-width:1200px;margin:0 auto;padding:0 20px 80px;}
.sv-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:30px;}
.sv-loading{grid-column:1/-1;text-align:center;padding:60px;color:#999;font-size:18px;}

.sv-user-card{background:#FFF;border:1.5px solid #EAEAEA;border-radius:20px;overflow:hidden;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);cursor:pointer;position:relative;}
.sv-user-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(222,52,138,0.1) 0%,transparent 100%);opacity:0;transition:opacity 0.3s;z-index:0;pointer-events:none;}
.sv-user-card:hover{transform:translateY(-12px);box-shadow:0 25px 50px rgba(0,0,0,0.15);border-color:#DE348A;}
.sv-user-card:hover::before{opacity:1;}

.sv-user-avatar{width:100%;height:240px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.sv-user-avatar img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s;}
.sv-user-card:hover .sv-user-avatar img{transform:scale(1.1);}
.sv-user-avatar.no-img{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#FFF;font-size:72px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,0.2);}

.sv-user-info{padding:24px;position:relative;z-index:1;}
.sv-user-name{font-size:22px;font-weight:700;color:#021526;margin:0 0 6px;}
.sv-user-profession{color:#666;font-size:16px;margin:0 0 12px;font-weight:500;}
.sv-user-bio{color:#888;font-size:14px;line-height:1.6;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sv-user-view-btn{background:linear-gradient(135deg,#DE348A 0%,#C92F7A 100%);color:#FFF;border:none;padding:12px 28px;border-radius:50px;font-weight:600;width:100%;cursor:pointer;transition:all 0.3s;font-size:15px;box-shadow:0 4px 12px rgba(222,52,138,0.3);}
.sv-user-view-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(222,52,138,0.5);}

.sv-pagination{display:flex;justify-content:center;gap:10px;padding:40px 20px;flex-wrap:wrap;}
.sv-page-btn{padding:10px 16px;border:1.5px solid #E0E0E0;background:#FFF;border-radius:8px;cursor:pointer;transition:all 0.3s;font-weight:500;min-width:44px;color:#333;font-family:'Poppins',sans-serif;}
.sv-page-btn:hover{background:#F8F9FA;border-color:#DE348A;transform:translateY(-2px);}
.sv-page-btn.active{background:#DE348A;color:#FFF;border-color:#DE348A;}

.sv-categories-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:60px 20px;background:#FAFAFA;}
.sv-category-item{padding:12px 24px;background:#FFF;border:1.5px solid #E0E0E0;border-radius:25px;font-size:15px;color:#666;transition:all 0.3s;cursor:pointer;}
.sv-category-item:hover{background:#DE348A;color:#FFF;border-color:#DE348A;transform:translateY(-2px);box-shadow:0 4px 12px rgba(222,52,138,0.3);}
.sv-category-item.active{background:#DE348A;color:#FFF;border-color:#DE348A;}

.sv-directory-footer{background:#1B1819;color:#FFF;padding:40px 20px;text-align:center;}
.sv-footer-brand{font-size:24px;font-weight:600;margin-bottom:20px;}
.sv-footer-nav{display:flex;justify-content:center;gap:30px;margin-bottom:20px;flex-wrap:wrap;}
.sv-footer-nav a{color:#FFF;text-decoration:none;transition:opacity 0.3s;}
.sv-footer-nav a:hover{opacity:0.7;}
.sv-footer-rights{color:rgba(255,255,255,0.4);font-size:14px;}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(5deg);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.fade-in{animation:fadeIn 0.5s ease-out;}

/* ============ REGISTRATION FORM ============ */
.ccp-register-wrapper{max-width:1000px;margin:30px auto;padding:20px;font-family:'Poppins',sans-serif;animation:fadeIn 0.6s ease-out;}
.ccp-form-section{margin-bottom:30px;padding:30px;border:1.5px solid #EAEAEA;border-radius:16px;background:#FFF;box-shadow:0 4px 20px rgba(0,0,0,0.04);transition:all 0.3s;}
.ccp-form-section:hover{box-shadow:0 8px 30px rgba(0,0,0,0.08);border-color:#DE348A;}
.ccp-form-section h2{color:#021526;font-size:24px;margin:0 0 8px;font-weight:700;}
.ccp-form-section > p{color:#666;font-size:14px;margin:0 0 20px;}
.ccp-form-row{display:flex;gap:20px;margin-bottom:15px;flex-wrap:wrap;}
.ccp-form-col{flex:1 1 220px;}
.ccp-form-col-full{flex:1 1 100%;}
.ccp-form-col label,.ccp-form-col-full label{display:block;font-size:15px;color:#2E2E2E;margin-bottom:6px;font-weight:500;}
.ccp-form-col input,.ccp-form-col select,.ccp-form-col-full input,.ccp-form-col-full select,.ccp-form-col-full textarea{width:100%;padding:12px 14px;border:1.5px solid #E0E0E0;border-radius:8px;font-size:15px;outline:none;transition:all 0.3s;font-family:'Poppins',sans-serif;}
.ccp-form-col input:focus,.ccp-form-col select:focus,.ccp-form-col-full input:focus,.ccp-form-col-full select:focus,.ccp-form-col-full textarea:focus{border-color:#DE348A;box-shadow:0 0 0 3px rgba(222,52,138,0.1);transform:translateY(-2px);}
.ccp-checkbox-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:10px;}
.ccp-checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px;border-radius:6px;transition:background 0.3s;}
.ccp-checkbox-group label:hover{background:#F8F9FA;}
.ccp-checkbox-group input[type="checkbox"]{width:auto;margin:0;}
.ccp-btn{background:linear-gradient(135deg,#DE348A 0%,#C92F7A 100%);color:#FFF;padding:14px 40px;border-radius:44px;border:none;font-weight:700;font-size:18px;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 15px rgba(222,52,138,0.3);margin-top:20px;}
.ccp-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(222,52,138,0.5);}
.ccp-register-error{background:#ffecec;border:1.5px solid #f5c2c2;padding:15px;margin-bottom:15px;border-radius:8px;color:#c93636;}
.ccp-register-success{background:#e8f8ed;border:1.5px solid #b6e7c7;padding:15px;margin-bottom:15px;border-radius:8px;color:#2d7a4a;font-weight:500;}
.ccp-form-header h1{font-size:36px;color:#021526;margin:0 0 10px;font-weight:700;}
.ccp-form-header p{color:#666;font-size:16px;margin:0;}

/* ============ RESPONSIVE ============ */
@media (min-width:1600px){
  .sv-card{width:800px;padding:64px 60px;margin-top:-150px}
  .sv-login-title{font-size:80px}
}

@media (min-width:1200px) and (max-width:1599px){
  .sv-card{width:667px;padding:48px 44px}
  .sv-login-title{font-size:64px}
}

@media (min-width:992px) and (max-width:1199px){
  .sv-card{width:620px;padding:42px 36px;margin-top:-110px}
  .sv-login-title{font-size:56px}
}

@media (min-width:768px) and (max-width:991px){
  .sv-header-rect{height:200px}
  .sv-card{width:88%;padding:36px;margin-top:-90px;border-radius:20px}
  .sv-login-title{font-size:44px}
  .sv-swash{width:140px;height:6px}
  .sv-field label{font-size:18px}
  .sv-cta{padding:12px;font-size:18px}
  .sv-eye{right:18px;width:30px;height:30px;top:calc(50% - 12px)}
  .sv-hero-title{font-size:44px;}
  .sv-filter-group{flex-direction:column;}
  .sv-results-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:767px){
  .sv-topbar{height:100px;padding:8px}
  .sv-header-rect{height:160px;padding:8px}
  .sv-login-title{font-size:32px;margin-top:6px}
  .sv-swash{width:120px;height:6px;margin-top:8px}
  .sv-card{width:94%;padding:20px;margin-top:-70px;border-radius:16px}
  .sv-field label{font-size:16px}
  .sv-input{padding:12px;border-radius:6px}
  .sv-cta{padding:12px;border-radius:36px;font-size:18px}
  .sv-forgot{margin-top:6px;font-size:14px}
  .sv-eye{right:12px;top:calc(50% - 12px);width:30px;height:30px}
  .sv-footer{padding:28px}
  .sv-top-nav{flex-direction:column;padding:20px;gap:15px;}
  .sv-nav-links{flex-wrap:wrap;justify-content:center;gap:15px;}
  .sv-hero-title{font-size:36px;padding:0 10px;}
  .sv-hero-underline{width:200px;}
  .sv-hero-section{padding:60px 15px;}
  .sv-search-container{margin:-40px auto 40px;}
  .sv-search-form{padding:20px;}
  .sv-filter-group{flex-direction:column;}
  .sv-filter-item{width:100%;}
  .sv-search-btn{width:100%;}
  .sv-results-grid{grid-template-columns:1fr;}
  .ccp-register-wrapper{padding:10px;}
  .ccp-form-section{padding:20px;}
}

@media (max-width:360px){
  .sv-login-title{font-size:28px}
  .sv-swash{width:100px}
  .sv-card{padding:16px}
  .sv-hero-title{font-size:28px;}
}