/* site.css — consolidated from 19 inline <style> blocks.
   Shared layer first, then per-page rules scoped with
   body.page-<name>, because 48 selectors were defined
   differently on different pages. */


/* ==================== shared ==================== */

.nav-menu {
        display: flex;
        justify-content: center;
        gap: 25px;
        align-items: center;
    }
.nav-menu a:hover {
        transform: scale(1.1); 
        padding-left: 20px; 
        color: #099380; 
    }
.nav-menu a::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background-color: #099380;
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }
.nav-menu a:hover::before {
        transform: scaleY(1); 
    }
.nav-menu a i {
        display: none;
    }
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    height: 20px;
    cursor: pointer;
}
.hamburger div {
    height: 3px;
    background-color: #066F61;
    border-radius: 3px;
}
.mobile-nav.active {
    left: 0;
}
.close-btn:hover {
    color: #ff0000; 
}
.search-form button i {
    font-size: 1.2rem;
}
.search-form input:focus {
    border-color: #099380;
}
.search-form button:hover {
    background-color: #099380;
}
.email-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.email-form-label {
    font-size: 16px;
    color: #555;
    font-weight: 500;
}
.email-form-control {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 12px 16px;
    font-size: 16px;
    color: #555;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.email-form-control:focus {
    border-color: #066F61;
    box-shadow: 0 0 5px rgba(0, 94, 162, 0.5);
}
textarea..email-form-control {
    resize: vertical;
    min-height: 150px;
}
.submit-btn[type="submit"] {
    background-color: #066F61;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit-btn[type="submit"]:hover {
    background-color:#099380;
}
.submit-btn[type="submit"]:active {
    background-color: #099380;
}
.mb-3 {
    margin-bottom: 1.5rem;
}
#edit-video-form h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}
.btn-add-user {
    background-color: #099380;
    color: #fff;
}
#video_selector {
    padding: 12px;
    margin-bottom: 20px;
    font-size: 1rem;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.admin-h2 {
    text-align: center;
}
#edit-video-form input[type="text"], 
#edit-video-form button[type="submit"] {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
#edit-video-form input[type="text"] {
    width: 100%;
    margin-bottom: 15px;
}
#edit-video-form button[type="submit"] {
    background-color: #099380;
    color: #fff;
    cursor: pointer;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}
#edit-video-form button[type="submit"]:hover {
    background-color: #066F61;
}
.container h1 {
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}
#adminTabs {
    margin-bottom: 20px;
}
#adminTabs .nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
}
#adminTabs .nav-link:hover {
    background-color: #e2e6ea;
    color: #495057;
}
@media (min-width: 769px) {
    #adminTabs .nav {
        display: flex;
        justify-content: flex-start;
        width: auto;
    }

    #adminTabs .tab-content {
        padding: 25px;
    }

    #adminTabs .nav-link {
        padding: 12px 24px;
        font-size: 14px;
    }
}
#modify-videos-form .form-group {
    margin-bottom: 20px;
}
#modify-videos-form .form-group label {
    margin-bottom: 5px;
}
#modify-videos-form .form-control {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: border-color 0.3s ease;
}
#modify-videos-form .form-control:focus {
    border-color: #066F61;
}
#modify-videos-form textarea.form-control {
    resize: vertical;
}
#modify-videos-form button.btn.btn-primary {
    background-color: #066F61;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#modify-videos-form button.btn.btn-primary:hover {
    background-color: #0056b3;
}
#add-video-form .form-group {
    margin-bottom: 20px;
}
#add-video-form .form-group label {
    margin-bottom: 5px;
}
#add-video-form .form-control {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: border-color 0.3s ease;
}
#add-video-form .form-control:focus {
    border-color: #066F61;
}
#add-video-form textarea.form-control {
    resize: vertical;
}
#add-video-form .account-form button.btn.btn-primary {
    background-color: #066F61;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#add-video-form button.btn.btn-primary:hover {
    background-color: #0056b3;
}
#modify-videos .form-group, #add-video .form-group {
    margin-bottom: 15px;
}
#modify-videos #video-details, #add-video .form-group {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#add-video .form-group select {
    background-color: #ffff;
}
#user-management {
    padding-top: 20px;
}
#user-management .form-group {
    margin-bottom: 10px;
}
#modify-videos-form .form-control:focus,
#add-video-form .form-control:focus {
    border-color: #066F61;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.navbar .form-control,
.navbar .form-group {
    border: none;
    box-shadow: none;
    padding: 8px;
}
.navbar .nav-link {
    background-color: transparent;
    color: #495057;
}
.custom-input {
    border: 2px solid #0056b3;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.custom-input:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 91, 187, 0.5);
    outline: none;
}
.custom-input::placeholder {
    color: #6c757d;
    font-style: italic;
}
textarea.custom-input {
    resize: vertical;
    min-height: 100px;
}
select.custom-input {
    background-color: #fff;
    cursor: pointer;
}
.modify-videos button[type="submit"],
.account-form button[type="submit"],
#add-video-form button[type="submit"] { 
    background-color: #099380;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.modify-videos button[type="submit"]:hover,
.account-form button[type="submit"]:hover,
#add-video-form button[type="submit"]:hover { 
    background-color: #066F61;
}
.modify-videos #add-video-form button[type="submit"]:focus,
.account-form button[type="submit"]:focus,
#add-video-form button[type="submit"]:focus { 
    outline: none;
    box-shadow: 0 0 5px rgba(0, 94, 162, 0.5);
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #f8f9fa;
}
@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
.login-container {
            background: white;
            margin-left: auto;
            margin-right: auto;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
.login-container h1 {
            margin-bottom: 20px;
            font-size: 1.8rem;
            color: #333;
            text-align: center;
        }
.login-container .form-control {
            margin-bottom: 15px;
            border-radius: 5px;
            padding: 10px;
            font-size: 1rem;
        }
.login-container .btn-primary {
            width: 100%;
            padding: 10px;
            background-color: #066F61;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            transition: background-color 0.3s ease;
        }
.login-container .btn-primary:hover {
            background-color: #099380;
        }
.login-container .error {
            color: red;
            margin-bottom: 10px;
            text-align: center;
        }
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #0a4977;
    padding: 28px 20px 20px;
    color: #fff;
    text-align: center;
}
.footer-contact,
.footer-links,
.footer-whatsapp,
.footer-social-media {
    margin-bottom: 15px;
}
.footer-contact p {
    font-size: 1rem;
    color: #fff;
    margin: 5px 0;
}
.footer-contact a {
    color: #7fd4c8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
.footer-contact a:hover,
.footer-contact a:focus {
    color: #fff;
    text-decoration: underline;
}
.footer-links h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.footer-social-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
}
.social-icon {
    font-size: 28px;
    color: #fff;
    transition: transform 0.2s ease, color 0.2s ease;
}
.social-icon:hover,
.social-icon:focus {
    transform: scale(1.12);
    color: #7fd4c8;
}
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #066F61;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}
.whatsapp-button:hover,
.whatsapp-button:focus {
    background-color: #099380;
    color: #fff;
}
.whatsapp-button i {
    font-size: 1.25rem;
}
.footer-bottom {
    padding: 12px 10px 16px;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    background: #0a4977;
    margin-top: 0;
}
.footer-bottom p {
    margin: 0;
    padding: 0;
    color: #cfe0ec;
}
@media (max-width: 768px) {
    .footer-container { padding: 20px 15px 15px; }
    .footer-social-media { gap: 20px; }
    .footer-contact p { font-size: 0.9rem; }
    .footer-links h2 { font-size: 1.2rem; }
    .footer-whatsapp { margin-top: 10px; }
    .footer-bottom p { font-size: 0.75rem; }
}
@media (max-width: 480px) {
    .footer-social-media { justify-content: center; gap: 16px; }
    .social-icon { font-size: 25px; }
}
.video-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
.modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #fff; 
    z-index: 2;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== account.php ==================== */

body.page-account {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-account header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-account .logo-container img {
        max-height: 60px;
    }
body.page-account .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-account .mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background-color: #F3F8F8;
    padding: 20px;
    transition: left 0.3s ease;
    z-index: 1000;
}
body.page-account .mobile-nav a {
    text-align: left;
    padding: 15px;
    color: #066F61;
    text-decoration: none;
    font-size: 1.2rem;
    margin-top: 20px;
}
body.page-account .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 26px;
    font-weight: bold;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001; 
}
body.page-account .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-account .search-form input {
    font-weight: 300;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-account .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-account .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-account .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-account .search-form button {
          width: 50px;  
      }
}
body.page-account .container {
    max-width: 800px;
    margin: 0 auto;
}
body.page-account h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
  body.page-account .email-form-control {
          font-size: 14px;
          padding: 10px;
      }
  body.page-account .submit-btn[type="submit"] {
          font-size: 14px;
          padding: 10px 20px;
      }
  body.page-account .hamburger {
          display: flex; 
      }
  body.page-account .nav-menu {
              display: none; 
          }
  body.page-account .mobile-nav {
              display: flex; 
          }
}
body.page-account .account-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, sans-serif;
}
body.page-account .account-container h2, body.page-account .account-container h3 {
    color: #333;
    margin-bottom: 10px;
}
body.page-account .account-container p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}
body.page-account .account-container form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.page-account .account-container label {
    font-size: 14px;
    color: #333;
    text-align: left;
    font-weight: bold;
}
body.page-account .account-container input[type="password"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
}
body.page-account .account-container button {
    background: #066F61;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
body.page-account .account-container button:hover {
    background: #0056b3;
}
body.page-account .account-container .success {
    color: #28a745;
    font-weight: bold;
}
body.page-account .account-container .error {
    color: #dc3545;
    font-weight: bold;
}

/* ==================== admin.php ==================== */

body.page-admin {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 120px; 
        box-sizing: border-box; 
    }
body.page-admin header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-admin .logo-container img {
    height: 56px;
    width: auto;
}
body.page-admin .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-admin .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-admin .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-admin .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-admin .page-container {
    width: 100%;
    background-color: #F3F8F8;
    padding: 30px;
}
@media (max-width: 768px) {
  body.page-admin .video-description {
              max-width: 100%; 
              padding: 10px; 
          }
  body.page-admin .hamburger {
          display: flex; 
      }
  body.page-admin .nav-menu {
              display: none; 
          }
  body.page-admin .mobile-nav {
              display: flex; 
          }
}
body.page-admin .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-admin .search-form input {
    font-weight: 300;

    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-admin .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-admin .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-admin .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-admin .search-form button {
          width: 50px;  
      }
}
@media (max-width: 768px) {
  body.page-admin {
                  padding-top: 60px; 
              }
  body.page-admin .login-container {
                  width: 90%;
                  padding: 20px;
              }
}
body.page-admin #edit-video-form {
    margin: 30px auto; 
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    height: auto; 
}
body.page-admin #edit-video-form textarea {
    resize: vertical;
    width: 100%;
}
body.page-admin .form-group {
    margin-bottom: 25px;
}
@media (max-width: 768px) {
  body.page-admin .container {
          padding: 20px;
      }
  body.page-admin #edit-video-form input[type="text"], body.page-admin #edit-video-form button[type="submit"] {
          width: 100%;
          margin-bottom: 10px;
      }
}
body.page-admin #adminTabs .nav-item {
    margin-right: 10px;
    margin-bottom: 5px;
}
body.page-admin #adminTabs .nav-link {
    background-color: #f8f9fa;
    color: #495057;
    border-radius: 5px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.page-admin #adminTabs .nav-link.active {
    background-color: #066F61;
    color: white;
    border-color: #066F61;
}
body.page-admin #adminTabs .tab-content {
    display: block;
    overflow: hidden;
    height: auto !important; 
    padding: 25px;
}
body.page-admin #adminTabs .tab-pane {
    display: none;
    min-height: 100px;
    transition: none; 
}
body.page-admin #adminTabs .tab-pane.active {
    display: block;
    height: auto !important; 
}
body.page-admin #adminTabs .tab-content {
    height: auto; 
}
@media (max-width: 768px) {
  body.page-admin #adminTabs .nav {
          flex-direction: column;
          width: 100%;
      }
  body.page-admin #adminTabs .nav-item {
          margin-right: 0;
          margin-bottom: 10px;
      }
  body.page-admin #adminTabs .nav-link {
          padding: 12px;
          text-align: center;
          font-size: 16px;
      }
  body.page-admin #adminTabs .nav-link.active {
          background-color: #066F61;
          color: white;
      }
}
body.page-admin #video-details {
    display: none;
}
body.page-admin #adminTabs .nav-tabs {
    border-bottom: 2px solid #066F61;
}
body.page-admin a.btn-info {
    background-color: #099380;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease;
}
body.page-admin a.btn-info:hover {
    background-color: #0056b3;
    color: #fff;
}
body.page-admin a.btn-sm {
    font-size: 0.875rem;
    padding: 5px 10px;
}
body.page-admin .btn-info:focus, body.page-admin .btn-info:hover {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
@media (max-width: 768px) {
  body.page-admin .modify-videos button[type="submit"], body.page-admin .account-form button[type="submit"], body.page-admin #add-video-form button[type="submit"] { 
          width: 100%;
          margin-bottom: 10px;
      }
}
body.page-admin .pagination {
    display: inline-flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
body.page-admin .pagination .page-item {
    margin: 0 5px;
}
body.page-admin .pagination .page-link {
    color: #007bff;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.page-admin .pagination .page-link:hover {
    background-color: #066F61;
    color: white;
    border-color: #066F61;
}
body.page-admin .pagination .page-item.active .page-link {
    background-color: #066F61;
    color: white;
    border-color: #066F61;
}
body.page-admin .search-form-custom input[type="text"] {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 300px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}
body.page-admin .search-form-custom input[type="text"]:focus {
    border-color: #066F61;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
body.page-admin .search-form-custom button {
    background-color: #066F61;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
body.page-admin .search-form-custom button:hover {
    background-color: #0056b3;
}
body.page-admin .search-form-custom {
    margin-bottom: 20px;
}
body.page-admin .user-management {
    margin-top: 20px;
}
body.page-admin .user-management table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
body.page-admin .user-management th, body.page-admin .user-management td {
    padding: 12px;
    text-align: left;
    font-size: 14px;
    border: 1px solid #ddd;
}
body.page-admin .user-management th {
    background-color: #f2f2f2;
    font-weight: bold;
}
body.page-admin .user-management tr:nth-child(even) td {
    background-color: #f9f9f9;
}
body.page-admin .user-management tr:hover td {
    background-color: #f1f1f1;
}
body.page-admin .user-management .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
body.page-admin .user-management .action-buttons form {
    display: inline;
}
body.page-admin .btn-reset {
    background-color: #066F61;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    margin-bottom: 5px;
}
body.page-admin .btn-reset:hover {
    background-color: #0056b3;
}
body.page-admin .btn-delete {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
}
body.page-admin .btn-delete:hover {
    background-color: #b02a37;
}
body.page-admin .btn-add {
    background-color: #28a745;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    margin-top: 10px;
}
body.page-admin .btn-add:hover {
    background-color: #218838;
}
body.page-admin .modal {
    z-index: 1060 !important;
}
@media (max-width: 768px) {
  body.page-admin .user-management table {
          display: block;
          overflow-x: auto;
          white-space: nowrap;
      }
  body.page-admin .user-management th, body.page-admin .user-management td {
          font-size: 12px;
          padding: 8px;
      }
  body.page-admin .user-management .action-buttons {
          flex-direction: column;
          align-items: center;
      }
  body.page-admin .btn-reset, body.page-admin .btn-delete, body.page-admin .btn-add {
          width: 100%;
          text-align: center;
      }
}

/* ==================== ai_chat.php ==================== */

body.page-ai-chat #chatbox::-webkit-scrollbar {
            width: 6px; 
        }
body.page-ai-chat #chatbox::-webkit-scrollbar-track {
            background: #e5e7eb; 
            border-radius: 10px;
        }
body.page-ai-chat #chatbox::-webkit-scrollbar-thumb {
            background: #9ca3af; 
            border-radius: 10px;
        }
body.page-ai-chat #chatbox::-webkit-scrollbar-thumb:hover {
            background: #6b7280; 
        }
html, body.page-ai-chat {
            height: 100%;
            margin: 0;
            font-family: 'Inter', sans-serif;
            background-color: #e5e7eb; 
        }
body.page-ai-chat .chat-container-wrapper {
            display: flex;
            justify-content: center;
            align-items: center; 
            min-height: 100vh; 
            padding: 1rem; 
        }
body.page-ai-chat .chat-container {
            display: flex;
            flex-direction: column;
            
            height: auto;
            max-height: 95vh; 
            width: 100%; 
            max-width: 768px; 
            background-color: #ffffff; 
            border-radius: 0.75rem; 
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 
            overflow: hidden; 
        }
@media (min-width: 768px) {
  body.page-ai-chat .chat-container {
                  max-height: 80vh; 
               }
}
body.page-ai-chat .video-embed-container {
            margin-top: 0.75rem; 
            padding-top: 0.75rem; 
            border-top: 1px solid #e5e7eb; 
        }
body.page-ai-chat .video-embed-container iframe {
            aspect-ratio: 16 / 9;
            width: 100%;
            border-radius: 0.375rem; 
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 
        }
body.page-ai-chat .message-wrapper > div {
             max-width: 80%; 
        }
@media (min-width: 640px) {
  body.page-ai-chat .message-wrapper > div {
                   max-width: 75%;
              }
}
body.page-ai-chat .ai-response p {
            margin-bottom: 0.5rem; 
        }
body.page-ai-chat .ai-response p:last-child {
            margin-bottom: 0;
        }
body.page-ai-chat .ai-response strong {
            font-weight: 600; 
        }
body.page-ai-chat .ai-response ul {
            list-style: none; 
            padding-left: 0; 
            margin-top: 0.5rem; 
            margin-bottom: 0.5rem; 
        }
body.page-ai-chat .ai-response li {
            margin-bottom: 0.5rem;
            display: flex; 
            
            align-items: center; 
            
            gap: 0.5rem; 
        }
body.page-ai-chat .ai-response li .fa-video {
            
            flex-shrink: 0; 
            
         }

/* ==================== ai_form.php ==================== */

body.page-ai-form {
            font-family: 'Raleway', sans-serif;
            background-color: #F3F8F8; 
            color: #0a4977; 
        }
body.page-ai-form .loader {
            border: 5px solid #e5e7eb; 
            border-radius: 50%;
            border-top: 5px solid #0a4977; 
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
body.page-ai-form .form-select {
             border-width: 1px;
             border-color: #d1d5db; 
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
             background-position: right 0.5rem center;
             background-repeat: no-repeat;
             background-size: 1.5em 1.5em;
             padding-right: 2.5rem;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
        }
body.page-ai-form .form-input, body.page-ai-form .form-textarea {
             border-width: 1px;
             border-color: #d1d5db; 
        }
body.page-ai-form .video-card iframe { 
            width: 100%;
            max-width: 560px; 
            aspect-ratio: 16 / 9;
            border-radius: 0.5rem; 
            margin: 0 auto; 
            display: block;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
        }
body.page-ai-form .brand-blue-bg { background-color: #0a4977; }
body.page-ai-form .brand-blue-text { color: #0a4977; }
body.page-ai-form .brand-teal-text { color: #78c7a4; }
body.page-ai-form .bg-brand-teal-100 { background-color: #e0f2f1; }
body.page-ai-form .text-brand-teal-700 { color: #00796b; }
body.page-ai-form .hover-brand-blue-darker:hover { background-color: #083a5e; }
body.page-ai-form .focus-brand-teal-ring:focus {
            --tw-ring-color: #78c7a4;
        }
body.page-ai-form .focus-brand-teal-border:focus {
            --tw-border-opacity: 1;
            border-color: #78c7a4;
        }
body.page-ai-form #introMessage p { margin-bottom: 0.5rem; }
body.page-ai-form #introMessage p:last-child { margin-bottom: 0; }

/* ==================== contact.php ==================== */

body.page-contact {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-contact header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-contact .logo-container img {
        height: 56px;
    width: auto;
    }
body.page-contact .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-contact .mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background-color: #F3F8F8;
    padding: 20px;
    transition: left 0.3s ease;
    z-index: 1000;
}
body.page-contact .mobile-nav a {
    text-align: left;
    padding: 15px;
    color: #066F61;
    text-decoration: none;
    font-size: 1.2rem;
    margin-top: 20px;
}
body.page-contact .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 26px;
    font-weight: bold;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001; 
}
body.page-contact .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-contact .search-form input {
    font-weight: 300;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-contact .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-contact .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-contact .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-contact .search-form button {
          width: 50px;  
      }
}
body.page-contact .container {
    max-width: 800px;
    margin: 0 auto;
}
body.page-contact h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
  body.page-contact .email-form-control {
          font-size: 14px;
          padding: 10px;
      }
  body.page-contact .submit-btn[type="submit"] {
          font-size: 14px;
          padding: 10px 20px;
      }
  body.page-contact .hamburger {
          display: flex; 
      }
  body.page-contact .nav-menu {
              display: none; 
          }
  body.page-contact .mobile-nav {
              display: flex; 
          }
}

/* ==================== dashboard.php ==================== */

body.page-dashboard {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-dashboard header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-dashboard .logo-container img {
        height: 56px;
    width: auto; 
    }
body.page-dashboard .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-dashboard .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-dashboard .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-dashboard .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-dashboard .page-container {
    width: 100%;
    background-color: #F3F8F8;
    padding: 30px;
}
@media (max-width: 768px) {
  body.page-dashboard .video-description {
              max-width: 100%; 
              padding: 10px; 
          }
  body.page-dashboard .hamburger {
          display: flex; 
      }
  body.page-dashboard .nav-menu {
              display: none; 
          }
  body.page-dashboard .mobile-nav {
              display: flex; 
          }
}
body.page-dashboard .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-dashboard .search-form input {
    font-weight: 300;

    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-dashboard .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-dashboard .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-dashboard .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-dashboard .search-form button {
          width: 50px;  
      }
}
@media (max-width: 768px) {
  body.page-dashboard {
                  padding-top: 60px; 
              }
  body.page-dashboard .login-container {
                  width: 90%;
                  padding: 20px;
              }
}
body.page-dashboard #edit-video-form {
    margin: 30px auto; 
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    height: auto; 
}
body.page-dashboard #edit-video-form textarea {
    resize: vertical;
    width: 100%;
}
body.page-dashboard .form-group {
    margin-bottom: 25px;
}
@media (max-width: 768px) {
  body.page-dashboard .container {
          padding: 20px;
      }
  body.page-dashboard #edit-video-form input[type="text"], body.page-dashboard #edit-video-form button[type="submit"] {
          width: 100%;
          margin-bottom: 10px;
      }
}
body.page-dashboard #adminTabs .nav-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0; 
}
body.page-dashboard #adminTabs .nav-item {
    margin-bottom: -2px; 
}
body.page-dashboard #adminTabs .nav-link {
    border: 2px solid transparent;
    border-top-left-radius: 0.5rem; 
    border-top-right-radius: 0.5rem;
    padding: 0.8rem 1.5rem; 
    font-weight: 600;
    color: #066F61; 
    background-color: transparent;
    position: relative; 
    transition: all 0.3s ease-in-out; 
}
body.page-dashboard #adminTabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #099380; 
    transform: scaleX(0); 
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}
body.page-dashboard #adminTabs .nav-link:hover, body.page-dashboard #adminTabs .nav-link:focus {
    color: #099380; 
    isolation: isolate; 
}
body.page-dashboard #adminTabs .nav-link:hover::after, body.page-dashboard #adminTabs .nav-link:focus::after {
    transform: scaleX(1);
}
body.page-dashboard #adminTabs .nav-link.active {
    color: #333; 
    background-color: #ffffff; 
    border-color: #dee2e6 #dee2e6 #ffffff; 
    font-weight: 700;
}
body.page-dashboard #adminTabs .nav-link.active::after {
    transform: scaleX(0);
}
body.page-dashboard .tab-content {
    background-color: #ffffff;
    padding: 2.5rem 2rem; 
    border: 1px solid #dee2e6;
    border-top: none; 
    border-radius: 0 0 0.5rem 0.5rem; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); 
}
@media (max-width: 768px) {
  body.page-dashboard #adminTabs .nav-tabs {
          flex-direction: column; 
          border-bottom: none; 
          border-right: 2px solid #dee2e6; 
      }
  body.page-dashboard #adminTabs .nav-item {
          margin-right: -2px; 
          margin-bottom: 0;
      }
  body.page-dashboard #adminTabs .nav-link {
          border-radius: 0;
          text-align: left; 
          border-left: 4px solid transparent; 
          padding: 1rem;
          border-bottom: 1px solid #e9ecef; 
      }
  body.page-dashboard #adminTabs .nav-item:last-child .nav-link {
          border-bottom: none;
      }
  body.page-dashboard #adminTabs .nav-link::after {
          display: none;
      }
  body.page-dashboard #adminTabs .nav-link:hover, body.page-dashboard #adminTabs .nav-link:focus {
          background-color: #f8f9fa;
          border-left-color: #cdd2d7; 
      }
  body.page-dashboard #adminTabs .nav-link.active {
          background-color: #ffffff;
          color: #066F61;
          border-left-color: #066F61; 
          font-weight: 700;
      }
  body.page-dashboard .tab-content {
          border-top: 1px solid #dee2e6; 
          border-left: none; 
          border-radius: 0; 
          box-shadow: none; 
          padding: 1.5rem 1rem; 
      }
}
body.page-dashboard .tab-content form {
    max-width: 650px; 
    margin: 0 auto;   
}
body.page-dashboard .tab-content .form-group {
    margin-bottom: 1.5rem;
}
body.page-dashboard .tab-content label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #343a40;
}
body.page-dashboard .tab-content .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
    color: #495057;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
body.page-dashboard .tab-content .form-control:focus {
    color: #495057;
    background-color: #ffffff;
    border-color: #80bdff; 
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07), 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
body.page-dashboard .tab-content textarea.form-control {
    resize: vertical;
    min-height: 120px;
}
body.page-dashboard .tab-content form.account-form, body.page-dashboard .tab-content form#add-video-form, body.page-dashboard .tab-content form#edit-video-form {
    max-width: 650px;
    margin: 0 auto;
}
body.page-dashboard .tab-content form.account-form .btn, body.page-dashboard .tab-content form#add-video-form .btn, body.page-dashboard .tab-content form#edit-video-form .btn {
    width: 100%;
}
body.page-dashboard .search-form-custom {
    max-width: 500px;
    margin-left: 0; 
    margin-right: auto;
}
body.page-dashboard .tab-content .table {
    margin-top: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: .3rem;
    overflow: hidden; 
}
body.page-dashboard .tab-content .table th, body.page-dashboard .tab-content .table td {
    text-align: center; 
    vertical-align: middle;
}
body.page-dashboard .tab-content .table thead th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: #343a40;
    border-bottom-width: 2px !important; 
}
body.page-dashboard .tab-content .table tbody tr:hover {
    background-color: #f1f5f9; 
}
body.page-dashboard .tab-content .btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.3rem;
    text-decoration: none; 
    transition: all 0.2s ease-in-out;
}
body.page-dashboard .tab-content .btn-primary {
    color: #ffffff;
    background-color: #066F61; 
    border-color: #066F61;     
}
body.page-dashboard .tab-content .btn-primary:hover {
    color: #ffffff;
    background-color: #004b8d; 
    border-color: #004079;
}
body.page-dashboard .tab-content .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 94, 162, 0.5); 
}
body.page-dashboard .tab-content .btn-info {
    color: #ffffff;
    background-color: #099380; 
    border-color: #099380;     
    margin-bottom: 10px;
}
body.page-dashboard .tab-content .btn-info:hover {
    color: #ffffff;
    background-color: #3d865c; 
    border-color: #377752;
}
body.page-dashboard .tab-content .btn-info:focus {
    box-shadow: 0 0 0 0.2rem rgba(73, 158, 112, 0.5); 
}
body.page-dashboard .tab-content .btn-danger {
    color: #ffffff;
    background-color: #dc3545;
    border-color: #dc3545;
}
body.page-dashboard .tab-content .btn-danger:hover {
    color: #ffffff;
    background-color: #c82333;
    border-color: #bd2130;
}
body.page-dashboard .tab-content .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
body.page-dashboard .tab-content .btn-sm {
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
}
body.page-dashboard #video-details {
    display: none; 
    padding: 1.5rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.3rem;
    margin-top: 1rem;
}
body.page-dashboard .search-form-custom {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: 0;
    margin-right: auto;
}
body.page-dashboard .search-form-custom input[type="text"] {
    flex-grow: 1;
}
body.page-dashboard .search-form-custom button {
    width: auto; 
    flex-shrink: 0;
}
body.page-dashboard .pagination {
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    margin-top: 2.5rem;
}
body.page-dashboard .pagination .page-item {
    margin: 0 3px;
}
body.page-dashboard .pagination .page-link {
    position: relative;
    display: block;
    padding: 0.6rem 1rem;
    color: #066F61;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
body.page-dashboard .pagination .page-link:hover {
    z-index: 2;
    color: #004b8d;
    background-color: #e9ecef;
}
body.page-dashboard .pagination .page-item.active .page-link {
    z-index: 3;
    color: #ffffff;
    background-color: #066F61;
    border-color: #066F61;
}
@media (max-width: 768px) {
  body.page-dashboard .search-form-custom {
          flex-direction: column;
          width: 100%;
          max-width: 100%;
      }
  body.page-dashboard .table-responsive {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          border: 1px solid #dee2e6;
          border-radius: 0.3rem;
      }
}
body.page-dashboard th, body.page-dashboard td {
    text-align: center;
}

/* ==================== edit_video.php ==================== */

body.page-edit-video {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-edit-video .container {
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }
body.page-edit-video h2 {
            text-align: center;
            color: #066F61;
        }
body.page-edit-video .form-group {
            margin-bottom: 15px;
        }
body.page-edit-video label {
            font-weight: 600;
        }
body.page-edit-video input, body.page-edit-video textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
body.page-edit-video button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
body.page-edit-video .btn-primary {
            background-color: #066F61;
            color: white;
        }
body.page-edit-video .btn-primary:hover {
            background-color: #003d73;
        }
body.page-edit-video .btn-danger {
            background-color: #ff4b4b;
            color: white;
        }
body.page-edit-video .btn-danger:hover {
            background-color: #cc0000;
        }
body.page-edit-video header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-edit-video .logo-container img {
        max-height: 60px;
    }
body.page-edit-video .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-edit-video .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-edit-video .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-edit-video .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-edit-video .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-edit-video .search-form input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-edit-video .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-edit-video .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-edit-video .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-edit-video .search-form button {
          width: 50px;  
      }
}
@media (max-width: 768px) {
  body.page-edit-video {
                  padding-top: 60px; 
              }
  body.page-edit-video .login-container {
                  width: 90%;
                  padding: 20px;
              }
}
@media (max-width: 767px) {
  body.page-edit-video .container {
          padding: 15px;
      }
  body.page-edit-video .email-form-control {
          font-size: 14px;
          padding: 10px;
      }
  body.page-edit-video .submit-btn[type="submit"] {
          font-size: 14px;
          padding: 10px 20px;
      }
  body.page-edit-video .hamburger {
          display: flex; 
      }
  body.page-edit-video .nav-menu {
              display: none; 
          }
  body.page-edit-video .mobile-nav {
              display: flex; 
          }
}
body.page-edit-video .video-form input, body.page-edit-video .video-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ==================== embed.php ==================== */

body.page-embed {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f7f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }
body.page-embed .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
body.page-embed h1, body.page-embed h2, body.page-embed h3 {
            color: #2c3e50;
        }
body.page-embed h1 {
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            margin-top: 0;
        }
body.page-embed label {
            display: block;
            margin: 20px 0 8px;
            font-weight: bold;
            font-size: 1.1em;
        }
body.page-embed #video-selector {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: #fff;
        }
body.page-embed #preview-area, body.page-embed #content-area {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
body.page-embed .hidden {
            display: none;
        }
body.page-embed #video-preview-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            background-color: #000;
            border-radius: 4px;
            overflow: hidden;
        }
body.page-embed #video-preview-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
body.page-embed #video-preview-title {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4em;
        }
body.page-embed #video-preview-description {
            margin-top: 0;
            color: #555;
            font-size: 1.05em;
        }
body.page-embed .textarea-container {
            position: relative;
        }
body.page-embed .copy-box {
            margin-top: 25px;
        }
body.page-embed .copy-box label {
            font-size: 1em;
            margin: 0 0 8px 0;
            color: #34495e;
        }
body.page-embed .copy-box textarea, body.page-embed .copy-box input {
            width: 100%;
            font-family: "Courier New", Courier, monospace;
            font-size: 14px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
body.page-embed .copy-box textarea {
            resize: vertical;
            white-space: pre-wrap;
            overflow-wrap: break-word;
        }
body.page-embed #generated-title { height: 60px; }
body.page-embed #generated-combined { height: 350px; }
body.page-embed .copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 8px 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
body.page-embed .copy-button:hover { background-color: #0056b3; }
body.page-embed .copy-button:active { background-color: #004494; }
body.page-embed .meta-row {
            display: flex;
            gap: 20px;
            margin-top: 25px;
        }
body.page-embed .meta-col {
            flex: 1;
            position: relative;
        }
body.page-embed .meta-col input {
            padding-right: 80px; 
        }

/* ==================== index.php ==================== */

body.page-index {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 120px; 
        box-sizing: border-box; 
    }
body.page-index header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-index .logo-container img {
    height: 56px;
    width: auto;
}
body.page-index .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-index .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-index .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-index .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-index .summary-section {
        background-color: #f7f7f7;
        padding: 40px 20px;
        color: #333;
        margin-top: 40px;
    }
body.page-index .summary-section h3 {
        font-size: 2rem;
        font-weight: 700;
        color: #066F61;
        margin-bottom: 15px;
    }
body.page-index .summary-section p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #555;
        max-width: 900px;
        margin: 0 auto;
    }
body.page-index .explore-video-library {
        padding: 40px 20px;
        text-align: center;
    }
body.page-index .explore-video-library h1 {
        font-size: 2.5em;
        color: #333;
        font-weight: bold;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
body.page-index .video-description {
        font-size: 1.2rem; 
        line-height: 1.8;  
        color: #555;       
        max-width: 900px;  
        margin: 20px auto; 
        padding: 15px;     
        background-color: #fff; 
        border-radius: 8px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        overflow-wrap: break-word; 
    }
body.page-index .video-description mark {
        background-color: #78c7a4; 
        color: #fff; 
        padding: 2px 6px; 
        border-radius: 8px; 
        font-weight: bold; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    }
body.page-index .video--collection {
        width: 100%;
        background-color: #0a4977;
    }
@media (max-width: 768px) {
  body.page-index .video-description {
              font-size: 1.1rem; 
              max-width: 100%; 
              padding: 10px; 
          }
  body.page-index .hamburger {
          display: flex; 
      }
  body.page-index .nav-menu {
              display: none; 
          }
  body.page-index .mobile-nav {
              display: flex; 
          }
}
body.page-index .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-index .search-form input {
    font-weight: 300;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-index .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-index .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-index .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-index .search-form button {
          width: 50px;  
      }
}
body.page-index .video-container {
    width: 100%;
    background-color: #0a4977;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #0a4977; 
    padding: 30px;
}
body.page-index .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
body.page-index .video-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    position: relative; 
}
body.page-index .video-card:hover {
    transform: scale(1.05);
}
body.page-index .video-card-body {
    padding: 15px;
    padding-bottom: 40px; 
}
body.page-index .watch-btn {
    text-decoration: none;
    color: #fff;
    background-color: #066F61;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
    position: absolute; 
    bottom: 10px; 
    left: 15px; 
    z-index: 1; 
}
body.page-index .watch-btn:hover {
    background-color: #099380;
}
body.page-index .video-card-title {
            font-size: 1.2em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
body.page-index .video-card-desc {
            font-size: 0.9em;
            color: #555;
            margin-bottom: 15px;
        }
body.page-index .modal {
    display: none;
    position: fixed;
    z-index: 1060; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
body.page-index .login {
    text-decoration: none;
    font-weight: bold;
    color: #099380;
}
body.page-index .modal-content {
    background-color: #2d2d2d;
    border-radius: 5px;
    text-align: center;
    width: 80%; 
    max-width: 800px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    height: auto;
    max-height: 80vh; 
    overflow: hidden; 
}
body.page-index .modal-content h4 {
    font-size: 18px;
    color: #fff;
    margin: 15px 0;
    word-wrap: break-word; 
}
body.page-index .modal-content p {
    font-size: 16px;
    color: #ddd;
    line-height: 1.5;
    padding: 0 15px; 
    word-wrap: break-word; 
}
body.page-index #videoEmbed iframe {
    border-radius: 8px;
    max-width: 100%;
    height: 400px;
}
body.page-index .modal-content iframe {
    width: 100%;
    height: 600px; 
    border: none;
    border-radius: 8px; 
}
body.page-index .vp-center {
    
    display: block !important;  
    margin: 0 auto !important;  
    padding: 10px !important;   
    
    
}
body.page-index .header-message {
            color: #fff;
            padding: 15px 20px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

/* ==================== login.php ==================== */

body.page-login {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-login header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-login .logo-container img {
        height: 56px;
    width: auto;
    }
body.page-login .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-login .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-login .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-login .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-login .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-login .search-form input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-login .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-login .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-login .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-login .search-form button {
          width: 50px;  
      }
}
@media (max-width: 768px) {
  body.page-login {
                  padding-top: 60px; 
              }
  body.page-login .login-container {
                  width: 90%;
                  padding: 20px;
              }
}
@media (max-width: 767px) {
  body.page-login .container {
          padding: 15px;
      }
  body.page-login .email-form-control {
          font-size: 14px;
          padding: 10px;
      }
  body.page-login .submit-btn[type="submit"] {
          font-size: 14px;
          padding: 10px 20px;
      }
  body.page-login .hamburger {
          display: flex; 
      }
  body.page-login .nav-menu {
              display: none; 
          }
  body.page-login .mobile-nav {
              display: flex; 
          }
}

/* ==================== playlists.php ==================== */

body.page-playlists { 
            font-family: 'Raleway', sans-serif; 
            background-color: #f4f7f9; 
            color: #334155; 
            padding-top: 100px; 
            margin: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }
body.page-playlists header {
            background-color: #ffffff;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 999;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            box-shadow: 0 2px 15px rgba(0,0,0,0.04);
        }
body.page-playlists .logo-container img {
            max-height: 70px;
        }
body.page-playlists .nav-menu a {
            color: #475569;
            font-weight: 600;
            text-decoration: none;
            font-size: 0.95rem;
            padding: 8px 12px;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
        }
body.page-playlists .nav-menu a:hover, body.page-playlists .nav-menu a.active {
            color: #066F61;
        }
body.page-playlists .nav-menu a::after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #099380;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
body.page-playlists .nav-menu a:hover::after, body.page-playlists .nav-menu a.active::after {
            width: 80%;
        }
body.page-playlists .mobile-nav {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: -100%;
            width: 75%;
            height: 100%;
            background-color: #ffffff;
            padding: 30px 20px;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            box-shadow: 5px 0 20px rgba(0,0,0,0.1);
        }
body.page-playlists .mobile-nav a {
            padding: 15px 0;
            color: #066F61;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            border-bottom: 1px solid #f1f5f9;
        }
body.page-playlists .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: 300;
            color: #64748b;
            background: none;
            border: none;
            cursor: pointer;
        }
body.page-playlists .search-form {
            display: flex;
            align-items: center;
            margin-left: 10px;
            background: #f1f5f9;
            border-radius: 50px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }
body.page-playlists .search-form:focus-within {
            border-color: #066F61;
            box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.1);
        }
body.page-playlists .search-form input {
            padding: 8px 16px;
            border: none;
            background: transparent;
            font-size: 0.95rem;
            outline: none;
            width: 200px;
            color: #334155;
        }
body.page-playlists .search-form button {
            padding: 8px 16px;
            background: transparent;
            color: #066F61;
            border: none;
            cursor: pointer;
        }
body.page-playlists .page-container { 
            width: 100%; 
            padding: 20px; 
            max-width: 1200px; 
            margin: 0 auto; 
            min-height: calc(100vh - 200px);
        }
body.page-playlists .page-title {
            color: #0f172a;
            font-weight: 800;
            font-size: 2.2rem;
            letter-spacing: -0.5px;
        }
body.page-playlists .btn-custom { 
            background-color: #066F61; 
            color: white; 
            border: none; 
            padding: 12px 24px; 
            border-radius: 50px; 
            font-weight: 700; 
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 94, 162, 0.2);
        }
body.page-playlists .btn-custom:hover { 
            background-color: #004b82; 
            color: white; 
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 94, 162, 0.3);
        }
body.page-playlists .empty-state {
            background: white;
            border-radius: 20px;
            padding: 60px 20px;
            text-align: center;
            border: 1px dashed #cbd5e1;
            margin-top: 20px;
        }
body.page-playlists .empty-icon {
            font-size: 60px;
            color: #cbd5e1;
            margin-bottom: 20px;
        }
body.page-playlists .playlist-card { 
            background: white; 
            border-radius: 16px; 
            padding: 24px; 
            margin-bottom: 30px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid #e2e8f0;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
body.page-playlists .playlist-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 4px;
            background: linear-gradient(90deg, #066F61, #099380);
            opacity: 0;
            transition: opacity 0.3s;
        }
body.page-playlists .playlist-card:hover { 
            transform: translateY(-6px); 
            box-shadow: 0 12px 25px rgba(0,0,0,0.08); 
            border-color: #cbd5e1;
        }
body.page-playlists .playlist-card:hover::before {
            opacity: 1;
        }
body.page-playlists .playlist-header h3 { 
            color: #0f172a; 
            font-weight: 800; 
            font-size: 1.3rem; 
            margin-bottom: 12px; 
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
body.page-playlists .playlist-meta { 
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px; 
        }
body.page-playlists .meta-badge {
            background: #f1f5f9;
            color: #475569;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
body.page-playlists .meta-badge i { color: #066F61; }
body.page-playlists .playlist-actions { 
            margin-top: auto; 
            display: flex; 
            align-items: center;
            gap: 10px; 
        }
body.page-playlists .btn-action {
            border: none;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            text-decoration: none;
        }
body.page-playlists .btn-view { background: #eff6ff; color: #066F61; flex-grow: 1; justify-content: center; }
body.page-playlists .btn-view:hover { background: #066F61; color: white; }
body.page-playlists .btn-share { background: #f0fdf4; color: #16a34a; }
body.page-playlists .btn-share:hover { background: #16a34a; color: white; }
body.page-playlists .btn-delete { background: #fef2f2; color: #dc2626; padding: 8px; width: 36px; height: 36px; justify-content: center; }
body.page-playlists .btn-delete:hover { background: #dc2626; color: white; }
body.page-playlists .share-section { 
            margin-top: 15px; 
            background: #f8fafc; 
            padding: 15px; 
            border-radius: 12px; 
            border: 1px dashed #cbd5e1; 
            display: none; 
            animation: fadeIn 0.3s ease;
        }
body.page-playlists .share-link-text {
            word-break: break-all;
            color: #475569;
            font-size: 0.85rem;
            display: block;
            margin-bottom: 10px;
            background: white;
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }
body.page-playlists .btn-copy {
            font-size: 0.85rem;
            color: #066F61;
            font-weight: 600;
            text-decoration: none;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }
body.page-playlists .btn-copy:hover { text-decoration: underline; }
body.page-playlists .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
body.page-playlists .modal-header {
            border-bottom: 1px solid #f1f5f9;
            padding: 20px 24px;
        }
body.page-playlists .modal-title { font-weight: 800; color: #0f172a; }
body.page-playlists .modal-body { padding: 24px; }
body.page-playlists .form-control {
            border-radius: 10px;
            padding: 12px 16px;
            border: 1px solid #cbd5e1;
            font-size: 1rem;
        }
body.page-playlists .form-control:focus {
            border-color: #066F61;
            box-shadow: 0 0 0 4px rgba(0, 94, 162, 0.1);
        }
@media (max-width: 768px) {
  body.page-playlists { padding-top: 80px; }
  body.page-playlists .hamburger { display: flex; }
  body.page-playlists .nav-menu { display: none; }
  body.page-playlists .mobile-nav { display: flex; }
  body.page-playlists .search-form { margin: 20px 0 0 0; width: 100%; border-radius: 8px; }
  body.page-playlists .search-form input { width: 100%; }
  body.page-playlists .page-title { font-size: 1.8rem; }
  body.page-playlists .btn-custom { width: 100%; justify-content: center; margin-top: 10px; }
  body.page-playlists .playlist-actions { flex-wrap: wrap; }
  body.page-playlists .btn-view { width: 100%; }
}

/* ==================== scripts.php ==================== */

body.page-scripts {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 2em;
        margin: auto;
        max-width: 800px;
        background-color: #f9f9f9;
        color: #333;
    }
body.page-scripts h2 {
        text-align: center;
        color: #222;
        margin-bottom: 1em;
        font-size: 1.5em;
    }
body.page-scripts label {
        font-weight: bold;
        margin-top: 1em;
        display: block;
        font-size: 1em;
    }
body.page-scripts select {
        width: 100%;
        padding: 0.6em;
        font-size: 1em;
        margin-bottom: 1em;
        border-radius: 6px;
        border: 1px solid #aaa;
        background-color: #fff;
        box-sizing: border-box;
    }
body.page-scripts .script-box {
        background-color: #fff;
        padding: 1.5em 2em;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        line-height: 1.6;
        font-size: 1.05em;
        color: #2c2c2c;
        margin-top: 1em;
    }
body.page-scripts .video-player {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin: 1em 0;
        border-radius: 8px;
    }
body.page-scripts .script-box {
    background-color: #fff;
    padding: 1.5em 2em;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    line-height: 1.6;
    font-size: 1.05em;
    color: #2c2c2c;
    margin-top: 1em;
    max-height: 400px;         
    overflow-y: auto;          
}
body.page-scripts .script-line {
        margin-bottom: 1.5em;
    }
body.page-scripts .timecode {
        display: block;
        font-weight: bold;
        font-size: 1.1em;
        color: #555;
        margin-bottom: 0.5em; 
    }
body.page-scripts .time-jump {
        color: #000;
        text-decoration: none;
        transition: all 0.2s ease;
    }
body.page-scripts .time-jump:hover {
        color: #000;
        text-decoration: none;
        transform: scale(1.05);
        font-weight: bold;
    }
@media screen and (max-width: 600px) {
  body.page-scripts {
              padding: 1em;
          }
  body.page-scripts h2 {
              font-size: 1.3em;
          }
  body.page-scripts select {
              font-size: 0.95em;
          }
  body.page-scripts .script-box {
              padding: 1em;
              font-size: 1em;
          }
}

/* ==================== search_results.php ==================== */

body.page-search-results { font-family: 'Raleway', sans-serif; background-color: #F3F8F8; color: #333; padding-top: 80px; }
body.page-search-results header { background-color:#F3F8F8; position: fixed; width: 100%; top: 0; z-index: 999; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
body.page-search-results .logo-container img { height: 56px;
    width: auto; }
body.page-search-results .nav-menu a { color: #066F61; font-weight: 700; text-decoration: none; font-size: 1rem; padding: 10px 15px; border-radius: 5px; transition: all 0.3s ease; }
body.page-search-results .mobile-nav { display: none; flex-direction: column; position: fixed; top: 0; left: -100%; width: 70%; height: 100%; background-color: #F3F8F8; padding: 20px; transition: left 0.3s ease; z-index: 1000; }
body.page-search-results .mobile-nav a { padding: 15px; color: #066F61; text-decoration: none; font-size: 1.2rem; margin-top: 20px; }
body.page-search-results .close-btn { position: absolute; top: 15px; right: 15px; font-size: 26px; border: none; background: none; cursor: pointer; }
body.page-search-results .page-container { width: 100%; background-color: #F3F8F8; padding: 30px; }
body.page-search-results .search-form { display: flex; align-items: center; margin-left: 20px; }
body.page-search-results .search-form input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 1rem; flex: 1; }
body.page-search-results .search-form button { padding: 8px 12px; background-color: #066F61; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; }
body.page-search-results .search-results-container { width: 100%; max-width: 900px; margin: 20px auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
body.page-search-results .result-item { display: flex; flex-direction: column; margin-bottom: 25px; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; }
body.page-search-results .result-item-main-content { display: flex; width: 100%; }
body.page-search-results .result-item img { width: 160px; height: 100px; object-fit: cover; margin-right: 20px; border-radius: 6px; flex-shrink: 0; }
body.page-search-results .result-item .content { flex: 1; }
body.page-search-results .result-item h3 { margin: 0 0 8px; font-size: 1.4rem; color: #066F61; font-weight: 700;}
body.page-search-results .result-item p.description { margin: 0 0 10px; color: #4b5563; font-size: 0.95rem; line-height: 1.6; }
body.page-search-results .watch-btn, body.page-search-results .add-playlist-btn { background-color: #066F61; color: #fff; padding: 8px 15px; border-radius: 5px; border: none; font-weight: 500; transition: background-color 0.2s ease; margin-right: 10px; }
body.page-search-results .add-playlist-btn { background-color: #099380; }
body.page-search-results .watch-btn:hover { background-color: #004b87; color: white; }
body.page-search-results .add-playlist-btn:hover { background-color: #3d8b5e; color: white; }
body.page-search-results .script-snippet { margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-left: 3px solid #78c7a4; font-size: 0.9rem; color: #333; }
body.page-search-results .pagination .page-link { color: #066F61; }
body.page-search-results .pagination .page-item.active .page-link { background-color: #066F61; border-color: #066F61; color: white; }
body.page-search-results .results-search-form { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 25px; }
body.page-search-results .results-search-form .search-input-group { display: flex; flex-grow: 1; }
body.page-search-results .results-search-form input[type="text"] { flex: 1; padding: 10px 15px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; }
body.page-search-results .results-search-form button { padding: 10px 15px; background-color: #066F61; color: white; border: none; border-radius: 0 5px 5px 0; }
@media (max-width: 768px) {
  body.page-search-results .nav-menu { display: none; }
  body.page-search-results .hamburger { display: flex; }
  body.page-search-results .result-item-main-content { flex-direction: column; }
  body.page-search-results .result-item img { width: 100%; height: auto; margin-right: 0; margin-bottom: 10px; }
  body.page-search-results .search-form { width: 100%; margin: 20px 0 0 0; }
  body.page-search-results .search-form input { width: calc(100% - 50px); }
  body.page-search-results .search-form button { width: 50px; }
  body.page-search-results .modal { z-index: 10000 !important; }
  body.page-search-results .modal-backdrop { z-index: 9999 !important; }
}

/* ==================== support.php ==================== */

body.page-support {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(to bottom, #f8fbff, #eef6ff);
}
body.page-support .tutorial-card {
    transition: all .25s ease;
}
body.page-support .tutorial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
body.page-support .tutorial-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e40af;
    margin: 1rem 0 .75rem;
}
body.page-support .tutorial-content p {
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.75;
}
body.page-support .tutorial-content ul {
    list-style: disc;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    color: #4b5563;
}
body.page-support .tutorial-content li {
    margin-bottom: .5rem;
}
body.page-support .tutorial-content strong, body.page-support .tutorial-content b {
    color: #111827;
    font-weight: 700;
}
body.page-support .support-card {
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    border-radius:24px;
    overflow:hidden;
    position:relative;
}
body.page-support .support-card::before {
    content:"";
    position:absolute;
    right:-40px;
    top:-40px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}
body.page-support .support-email {
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    background:white;
    color:#2563eb;
    padding:16px 24px;
    border-radius:16px;
    font-size:1.15rem;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
body.page-support .support-email:hover {
    transform:translateY(-2px) scale(1.02);
    background:#f8fafc;
}
body.page-support .support-button {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:#ffffff22;
    border:1px solid rgba(255,255,255,.2);
    padding:12px 18px;
    border-radius:14px;
    color:white;
    text-decoration:none;
    transition:.2s;
}
body.page-support .support-button:hover {
    background:#ffffff33;
}
body.page-support .hero-icon {
    width:90px;
    height:90px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:white;
    font-size:2.5rem;
    margin-bottom:24px;
}

/* ==================== video.php ==================== */

body.page-video { 
            font-family: 'Raleway', sans-serif; 
            background-color: #f4f7f9;
            color: #334155;
        }
body.page-video .header-section { 
            background: linear-gradient(135deg, #066F61 0%, #003b6b 100%);
            color: white; 
            padding: 60px 0 50px; 
            margin-bottom: 40px; 
            text-align: center; 
            border-bottom-left-radius: 24px;
            border-bottom-right-radius: 24px;
            box-shadow: 0 10px 30px rgba(0, 94, 162, 0.15);
        }
body.page-video .header-section h1 {
            font-weight: 800;
            font-size: 2.2rem;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
            padding: 0 20px;
        }
body.page-video .header-section p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }
body.page-video .btn-back {
            background-color: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            border-radius: 50px;
            padding: 8px 20px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
body.page-video .btn-back:hover {
            background-color: rgba(255, 255, 255, 0.25);
            color: white;
            transform: translateY(-2px);
        }
body.page-video .locked-card {
            background: white;
            border-radius: 20px;
            padding: 60px 30px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            border: 1px solid #f1f5f9;
            max-width: 650px;
            margin: 40px auto;
            position: relative;
            overflow: hidden;
        }
body.page-video .locked-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 6px;
            background: linear-gradient(90deg, #066F61, #099380);
        }
body.page-video .locked-icon-wrapper {
            width: 80px; height: 80px;
            background: #fff7ed;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }
body.page-video .locked-icon {
            font-size: 36px;
            color: #ea580c;
        }
body.page-video .locked-card h2 {
            font-weight: 800;
            color: #0f172a;
        }
body.page-video .btn-subscribe {
            background: #066F61;
            color: white;
            border-radius: 50px;
            padding: 12px 32px;
            font-weight: 700;
            font-size: 1.05rem;
            display: inline-block;
            margin-top: 10px;
            text-decoration: none;
            transition: all 0.3s;
        }
body.page-video .btn-subscribe:hover {
            background: #004b82;
            color: white;
            box-shadow: 0 6px 15px rgba(0, 94, 162, 0.3);
        }
body.page-video .video-container {
            background: white;
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            border: 1px solid #f1f5f9;
            max-width: 900px;
            margin: 0 auto 40px auto;
        }
body.page-video .iframe-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; 
            border-radius: 12px;
            overflow: hidden;
            background: #000;
            margin-bottom: 20px;
        }
body.page-video .iframe-wrapper iframe {
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            width: 100%; height: 100%;
            border: none;
        }
body.page-video .video-details h3 {
            font-weight: 800;
            color: #0f172a;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
body.page-video .video-details p {
            color: #64748b;
            line-height: 1.6;
            font-size: 1.05rem;
        }

/* ==================== video_collection.php ==================== */

/* also included by: index.php */

body.page-video-collection .page-container {
    width: 100%;
    background-color: #0a4977;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #0a4977; 
    padding: 30px;
max-width: 1200px; 
    margin: 0 auto; }
body.page-video-collection .breadcrumb {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.page-video-collection .breadcrumb a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
body.page-video-collection .breadcrumb a:hover {
    color: #FFD700; 
}
body.page-video-collection .breadcrumb span {
    color: #a1aeb9;
    font-weight: normal;
}
body.page-video-collection .breadcrumb a:last-child {
    color: #a1aeb9;
}
body.page-video-collection .breadcrumb a::after {
    content: ">";
    margin: 0 8px;
    color: #6c757d;
}
body.page-video-collection .breadcrumb a:last-child::after {
    content: "";
}
body.page-video-collection .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 20px;
}
body.page-video-collection .group {
    width: 300px; 
    height: 325px; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #F3F8F8;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
}
body.page-video-collection .group-link { text-decoration: none; }
body.page-video-collection .group:hover {
    background-color: #003366;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}
body.page-video-collection .group .view-videos-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #099380; 
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.page-video-collection .group:hover .view-videos-link { color: #FFD700; }
body.page-video-collection .group:hover .view-videos-link:hover { color: #FFD700; }
body.page-video-collection .icon {
    font-size: 50px;
    color: #099380;
    margin-top: 20px; 
}
body.page-video-collection .group:hover .icon { color: #FFD700; }
body.page-video-collection .group-name {
    margin: 10px 0 5px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-decoration: none; 
}
body.page-video-collection .group:hover .group-name { color: #FFD700; }
body.page-video-collection .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
body.page-video-collection .thumbnail {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background: #fff; 
    padding-bottom: 15px; 
}
body.page-video-collection .thumbnail:hover {
    transform: scale(1.02);
}
body.page-video-collection .thumbnail img {
    width: 100%;
    height: auto;
}
body.page-video-collection .thumbnail h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    color: #333; 
    padding: 0 10px;
}
body.page-video-collection .thumbnail p {
    font-size: 14px;
    color: #666; 
    line-height: 1.5;
    height: 60px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 0 10px;
    margin-bottom: 10px;
}
body.page-video-collection .button-group {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    gap: 5px;
}
body.page-video-collection .action-btn {
    padding: 8px 10px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    flex: 1; 
    transition: background-color 0.2s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body.page-video-collection .add-playlist-btn {
    background-color: #099380;
    color: white;
}
body.page-video-collection .add-playlist-btn:hover {
    background-color: #3d8b5e;
}
body.page-video-collection .watch-video-btn {
    background-color: #066F61;
    color: white;
}
body.page-video-collection .watch-video-btn:hover {
    background-color: #004475;
}
body.page-video-collection .modal {
    display: none;
    position: fixed;
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}
body.page-video-collection #videoEmbed iframe {
    border-radius: 8px;
    max-width: 100%;
    height: 400px;
    margin-top: 20px;
}
body.page-video-collection .modal-content {
    background-color: #2d2d2d;
    color: white;
}
body.page-video-collection #addToPlaylistModal .modal-content {
    background-color: #fff;
    color: #333;
}
body.page-video-collection .modal-content h4 { font-size: 18px; margin: 15px 0; }
body.page-video-collection #addToPlaylistModal .btn-close {
    filter: none; 
}
body.page-video-collection .group-header, body.page-video-collection .shared-experience-header {
    color: #fff;
    width: 100%;
}
@media screen and (max-width: 768px) {
  body.page-video-collection .container {
          justify-content: center; 
          padding: 0 15px; 
      }
  body.page-video-collection .group {
          max-width: 300px; 
          height: 325px; 
          margin: 0 auto 20px; 
      }
}
/* -- as included in page-index -- */
body.page-index .page-container {
    width: 100%;
    background-color: #0a4977;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #0a4977; 
    padding: 30px;
max-width: 1200px; 
    margin: 0 auto; }
body.page-index .breadcrumb {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.page-index .breadcrumb a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
body.page-index .breadcrumb a:hover {
    color: #FFD700; 
}
body.page-index .breadcrumb span {
    color: #a1aeb9;
    font-weight: normal;
}
body.page-index .breadcrumb a:last-child {
    color: #a1aeb9;
}
body.page-index .breadcrumb a::after {
    content: ">";
    margin: 0 8px;
    color: #6c757d;
}
body.page-index .breadcrumb a:last-child::after {
    content: "";
}
body.page-index .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 20px;
}
body.page-index .group {
    width: 300px; 
    height: 325px; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #F3F8F8;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
}
body.page-index .group-link { text-decoration: none; }
body.page-index .group:hover {
    background-color: #003366;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}
body.page-index .group .view-videos-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #099380; 
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.page-index .group:hover .view-videos-link { color: #FFD700; }
body.page-index .group:hover .view-videos-link:hover { color: #FFD700; }
body.page-index .icon {
    font-size: 50px;
    color: #099380;
    margin-top: 20px; 
}
body.page-index .group:hover .icon { color: #FFD700; }
body.page-index .group-name {
    margin: 10px 0 5px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-decoration: none; 
}
body.page-index .group:hover .group-name { color: #FFD700; }
body.page-index .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
body.page-index .thumbnail {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background: #fff; 
    padding-bottom: 15px; 
}
body.page-index .thumbnail:hover {
    transform: scale(1.02);
}
body.page-index .thumbnail img {
    width: 100%;
    height: auto;
}
body.page-index .thumbnail h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    color: #333; 
    padding: 0 10px;
}
body.page-index .thumbnail p {
    font-size: 14px;
    color: #666; 
    line-height: 1.5;
    height: 60px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 0 10px;
    margin-bottom: 10px;
}
body.page-index .button-group {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    gap: 5px;
}
body.page-index .action-btn {
    padding: 8px 10px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    flex: 1; 
    transition: background-color 0.2s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body.page-index .add-playlist-btn {
    background-color: #099380;
    color: white;
}
body.page-index .add-playlist-btn:hover {
    background-color: #3d8b5e;
}
body.page-index .watch-video-btn {
    background-color: #066F61;
    color: white;
}
body.page-index .watch-video-btn:hover {
    background-color: #004475;
}
body.page-index .modal {
    display: none;
    position: fixed;
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}
body.page-index #videoEmbed iframe {
    border-radius: 8px;
    max-width: 100%;
    height: 400px;
    margin-top: 20px;
}
body.page-index .modal-content {
    background-color: #2d2d2d;
    color: white;
}
body.page-index #addToPlaylistModal .modal-content {
    background-color: #fff;
    color: #333;
}
body.page-index .modal-content h4 { font-size: 18px; margin: 15px 0; }
body.page-index #addToPlaylistModal .btn-close {
    filter: none; 
}
body.page-index .group-header, body.page-index .shared-experience-header {
    color: #fff;
    width: 100%;
}
@media screen and (max-width: 768px) {
  body.page-index .container {
          justify-content: center; 
          padding: 0 15px; 
      }
  body.page-index .group {
          max-width: 300px; 
          height: 325px; 
          margin: 0 auto 20px; 
      }
}

/* ==================== view_group.php ==================== */

body.page-view-group {
        font-family: 'Raleway', sans-serif;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #F3F8F8;
        color: #333;
        padding-top: 80px; 
        box-sizing: border-box; 
    }
body.page-view-group header {
    background-color:#F3F8F8; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
body.page-view-group .logo-container img {
        max-height: 60px;
    }
body.page-view-group .nav-menu a {
        color: #066F61;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
        display: flex;
        align-items: center;
    }
body.page-view-group .mobile-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100%;
        background-color: #F3F8F8;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
body.page-view-group .mobile-nav a {
        text-align: left;
        padding: 15px;
        color: #066F61;
        text-decoration: none;
        font-size: 1.2rem;
        margin-top: 20px;
    }
body.page-view-group .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
body.page-view-group .page-container {
    width: 100%;
    background-color: #F3F8F8;
    padding: 30px;
}
@media (max-width: 768px) {
  body.page-view-group .video-description {
              max-width: 100%; 
              padding: 10px; 
          }
  body.page-view-group .hamburger {
          display: flex; 
      }
  body.page-view-group .nav-menu {
              display: none; 
          }
  body.page-view-group .mobile-nav {
              display: flex; 
          }
}
body.page-view-group .search-form {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
body.page-view-group .search-form input {
    font-weight: 300;

    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    flex: 1;
}
body.page-view-group .search-form button {
    padding: 8px 12px;
    background-color: #066F61;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}
@media (max-width: 768px) {
  body.page-view-group .search-form {
          margin-top: 20px;
          margin-left: 0;  
          width: 100%;  
      }
  body.page-view-group .search-form input {
          width: calc(100% - 50px); 
          padding: 8px 12px;
      }
  body.page-view-group .search-form button {
          width: 50px;  
      }
}
@media (max-width: 768px) {
  body.page-view-group {
                  padding-top: 60px; 
              }
  body.page-view-group .login-container {
                  width: 90%;
                  padding: 20px;
              }
}
body.page-view-group #edit-video-form {
    margin: 30px auto; 
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}
body.page-view-group #edit-video-form textarea {
    resize: vertical;
}
body.page-view-group .form-group {
    margin-bottom: 25px;
}
@media (max-width: 768px) {
  body.page-view-group .container {
          padding: 20px;
      }
  body.page-view-group #edit-video-form input[type="text"], body.page-view-group #edit-video-form button[type="submit"] {
          width: 100%;
          margin-bottom: 10px;
      }
}
body.page-view-group #adminTabs .nav-item {
    margin-right: 10px;
    margin-bottom: 5px; 
}
body.page-view-group #adminTabs .nav-link {
    background-color: #f8f9fa;
    color: #495057;
    border-radius: 5px;
    padding: 10px 20px;
    text-transform: uppercase; 
    font-size: 14px; 
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.page-view-group #adminTabs .nav-link.active {
    background-color: #066F61;
    color: white;
    border-color: #066F61;
}
body.page-view-group #adminTabs .tab-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-top: 20px; 
}
@media (max-width: 768px) {
  body.page-view-group #adminTabs .nav {
          flex-direction: column; 
          width: 100%; 
      }
  body.page-view-group #adminTabs .nav-item {
          margin-right: 0; 
          margin-bottom: 10px; 
      }
  body.page-view-group #adminTabs .nav-link {
          padding: 12px;
          text-align: center; 
          font-size: 16px; 
      }
  body.page-view-group #adminTabs .nav-link.active {
          background-color: #066F61;
          color: white;
      }
}
body.page-view-group #video-details {
    display: none;
}
body.page-view-group #adminTabs .nav-tabs {
    border-bottom: 2px solid #066F61;
}
@media (max-width: 768px) {
  body.page-view-group .modify-videos button[type="submit"], body.page-view-group .account-form button[type="submit"], body.page-view-group #add-video-form button[type="submit"] { 
          width: 100%;
          margin-bottom: 10px;
      }
}
body.page-view-group .form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
body.page-view-group h2, body.page-view-group h3 {
    color: #333;
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}
body.page-view-group .members-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
body.page-view-group .members-table th, body.page-view-group .members-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ccc;
}
body.page-view-group .members-table th {
    background-color: #f8f9fa;
    font-weight: bold;
}
body.page-view-group .members-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
body.page-view-group .members-table tr:hover {
    background-color: #f1f1f1;
}
body.page-view-group .remove-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
body.page-view-group .remove-btn:hover {
    background-color: #c82333;
}
body.page-view-group .add-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
body.page-view-group .add-member select {
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    max-width: 280px;
    font-size: 16px;
    background-color: #fff;
    color: #555;
    transition: border-color 0.3s ease;
}
body.page-view-group .add-member select:focus {
    border-color: #099380;
    outline: none;
}
body.page-view-group .add-btn {
    padding: 12px 25px;
    background-color: #099380;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    width: 100%;
    max-width: 280px;
    text-align: center;
}
body.page-view-group .add-btn:hover {
    background-color: #066F61;
}
@media (max-width: 600px) {
  body.page-view-group .form-container {
          padding: 20px;
      }
  body.page-view-group .add-member select, body.page-view-group .add-member button {
          max-width: 100%;
      }
  body.page-view-group h2, body.page-view-group h3 {
          font-size: 18px;
      }
}

/* ==================== view_playlist.php ==================== */

body.page-view-playlist { font-family: 'Raleway', sans-serif; background-color: #F3F8F8;}
body.page-view-playlist .header-section { background-color: #066F61; color: white; padding: 40px 0; margin-bottom: 30px; text-align: center; }
body.page-view-playlist .video-card { background: white; border-radius: 8px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
body.page-view-playlist .video-body { padding: 15px; }
body.page-view-playlist .watch-btn { background-color: #066F61; color: white; padding: 8px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-top: 10px; }
body.page-view-playlist .watch-btn:hover { background-color: #099380; color: white; }
body.page-view-playlist .locked-card {
            background: white;
            border-radius: 12px;
            padding: 50px 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #e0e0e0;
            max-width: 600px;
            margin: 20px auto;
        }
body.page-view-playlist .locked-icon {
            font-size: 60px;
            color: #ff9800;
            margin-bottom: 20px;
        }
/* ============================================================
   riverside-theme.css
   Brand layer for riverside.emeraldcodestudios.com.

   Colour values sampled directly from riversideonline.com, not
   approximated. Append this to the END of assets/site.css:

       cat riverside-theme.css >> /var/www/riverside.../public/assets/site.css

   Every rule is prefixed body[class] so it carries the same
   specificity as the page-scoped rules above it and wins on
   source order. Nothing here needs a PHP change.

   To revert: re-copy assets/site.css from css-branded.zip.
   ============================================================ */

:root {
    --rv-teal:       #066F61;  /* primary — nav bar, buttons */
    --rv-teal-dark:  #00544A;  /* hover */
    --rv-teal-pale:  #B7E1E4;  /* logo mark, light accents */
    --rv-accent:     #ECFC2B;  /* search submit */
    --rv-ink:        #363636;  /* headings and body copy */
    --rv-tint:       #F3F8F8;  /* section background */
    --rv-line:       #C2D1D9;  /* rules and borders */
}

/* ---- 1. Type colour ------------------------------------------------
   Riverside sets copy in #363636, not #333 or #555. */
body[class] {
    color: var(--rv-ink);
    background-color: var(--rv-tint);
}
body[class] h1,
body[class] h2,
body[class] h3,
body[class] h4 {
    color: var(--rv-ink);
}

/* ---- 2. Square corners ---------------------------------------------
   Their whole system is rectangular. Nothing on riversideonline.com
   has a rounded corner except the circular icon buttons. */
body[class] .group,
body[class] .thumbnail,
body[class] .video-card,
body[class] .card,
body[class] .modal-content,
body[class] .login-container,
body[class] .account-container,
body[class] .form-container,
body[class] .action-btn,
body[class] .btn,
body[class] .search-form input,
body[class] .search-form button,
body[class] input,
body[class] textarea,
body[class] select {
    border-radius: 0;
}

/* ---- 3. Header ------------------------------------------------------
   Their logo sits on white with a hairline rule beneath, and the nav
   is set in the primary teal. */
body[class] header {
    background-color: #fff;
    border-bottom: 1px solid var(--rv-line);
    box-shadow: none;
}
body[class] .nav-menu a {
    color: var(--rv-teal);
    font-weight: 700;
    border-radius: 0;
}
body[class] .nav-menu a:hover,
body[class] .nav-menu a:focus {
    color: var(--rv-teal-dark);
    transform: none;          /* their nav doesn't zoom on hover */
    padding-left: 15px;       /* undo the slide */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Search: teal field, acid-yellow submit — the one bright note in
   their entire palette, used exactly once. */
body[class] .search-form input {
    border: 1px solid var(--rv-line);
}
body[class] .search-form input:focus {
    border-color: var(--rv-teal);
    outline: 2px solid var(--rv-teal-pale);
    outline-offset: 0;
}
body[class] .search-form button {
    background-color: var(--rv-accent);
    color: var(--rv-teal);
    border: 1px solid var(--rv-accent);
}
body[class] .search-form button:hover,
body[class] .search-form button:focus {
    background-color: var(--rv-teal);
    color: #fff;
    border-color: var(--rv-teal);
}

/* ---- 4. The navy panel ---------------------------------------------
   #0a4977 appears nowhere in Riverside's palette. Their content sits
   on white and the pale tint, with teal doing the accent work. */
body[class] .page-container,
body[class] .video-container {
    background: var(--rv-tint);
    background-color: var(--rv-tint);
}
body[class] .group-header,
body[class] .shared-experience-header {
    color: var(--rv-ink);
}
body[class] .breadcrumb a {
    color: var(--rv-teal);
}
body[class] .breadcrumb span,
body[class] .breadcrumb a:last-child {
    color: #6b7b83;
}
body[class] .breadcrumb a::after {
    color: var(--rv-line);
}

/* ---- 5. Cards -------------------------------------------------------
   Flat, bordered, no drop shadow. Depth comes from the border. */
body[class] .group,
body[class] .thumbnail {
    background: #fff;
    border: 1px solid var(--rv-line);
    box-shadow: none;
}
body[class] .group:hover {
    background-color: #fff;
    border-color: var(--rv-teal);
    box-shadow: none;
    transform: none;
}
body[class] .group:hover .icon,
body[class] .group:hover .group-name,
body[class] .group:hover .view-videos-link {
    color: var(--rv-teal);
}
body[class] .thumbnail:hover {
    border-color: var(--rv-teal);
    transform: none;
}
body[class] .icon {
    color: var(--rv-teal);
}

/* Card sizing: the 325px fixed height was tuned for PAC's much longer
   group names and leaves a large gap under six short ones. */
body[class] .group {
    height: auto;
    min-height: 236px;
    justify-content: flex-start;
    gap: 14px;
    padding: 24px 16px 18px;
}
body[class] .group-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--rv-ink);
}
body[class] .group .view-videos-link {
    margin-top: 0;
    color: var(--rv-teal);
    font-weight: 700;
}

/* ---- 6. Buttons -----------------------------------------------------
   Square, solid teal, no gradient. */
body[class] .action-btn,
body[class] .btn-primary,
body[class] .submit-btn,
body[class] .watch-btn,
body[class] .add-playlist-btn,
body[class] .watch-video-btn {
    background-color: var(--rv-teal);
    border-color: var(--rv-teal);
    color: #fff;
    font-weight: 700;
}
body[class] .action-btn:hover,
body[class] .btn-primary:hover,
body[class] .submit-btn:hover,
body[class] .watch-btn:hover,
body[class] .add-playlist-btn:hover,
body[class] .watch-video-btn:hover {
    background-color: var(--rv-teal-dark);
    border-color: var(--rv-teal-dark);
    color: #fff;
}

/* ---- 7. Footer ------------------------------------------------------
   Teal rather than navy, so the page ends in a brand colour. */
body[class] .footer-container,
body[class] .footer-bottom {
    background: var(--rv-teal);
}
body[class] .footer-contact a {
    color: var(--rv-accent);
}
body[class] .footer-contact a:hover,
body[class] .footer-contact a:focus {
    color: #fff;
}
body[class] .footer-bottom p {
    color: #cfe6e2;
}
body[class] .social-icon:hover,
body[class] .social-icon:focus {
    color: var(--rv-accent);
}
body[class] .whatsapp-button {
    background-color: var(--rv-teal-dark);
}

/* ---- 8. Specificity repairs ----------------------------------------
   Consolidating the CSS scoped each page's base rules to
   `body.page-x .foo` (0,2,1), which outranks shared state rules
   written as `.foo.state` (0,2,0). The slide-out mobile menu stopped
   opening because of exactly this: `body.page-index .mobile-nav`
   (left: -100%) was beating `.mobile-nav.active` (left: 0).
   Affects all 10 pages that carry the mobile nav. */
body[class] .mobile-nav.active {
    left: 0;
}

/* The h2 colour rule in section 1 is (0,2,1) and was overriding the
   footer's own `.footer-links h2` (0,1,1), turning "Connect with us"
   near-black on the teal footer. */
body[class] .footer-links h2 {
    color: #fff;
}

/* ---- 9. Accessibility floor ----------------------------------------- */
body[class] a:focus-visible,
body[class] button:focus-visible,
body[class] .action-btn:focus-visible {
    outline: 3px solid var(--rv-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    body[class] * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
/* ============================================================
   admin-subnav.css — sticky section bar for dashboard.php,
   replacing the Bootstrap tab strip.

   Append after riverside-theme.css:
       cat admin-subnav.css >> .../public/assets/site.css
   ============================================================ */

body[class] .admin-subnav {
    position: sticky;
    top: 80px;                 /* clears the fixed site header */
    z-index: 500;
    margin: 0 0 28px;
    background: var(--rv-teal, #066F61);
    border-bottom: 3px solid var(--rv-teal-dark, #00544A);
}

body[class] #adminTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1200px;
    margin-inline: auto;
}

body[class] #adminTabs .nav-item,
body[class] #adminTabs li {
    margin: 0;
}

body[class] #adminTabs .nav-link,
body[class] #adminTabs a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;       /* sit on the bar's own border */
    transition: background-color 0.15s ease;
}

body[class] #adminTabs .nav-link:hover,
body[class] #adminTabs .nav-link:focus-visible,
body[class] #adminTabs a:hover,
body[class] #adminTabs a:focus-visible {
    background: var(--rv-teal-dark, #00544A);
    color: #fff;
    text-decoration: none;
}

body[class] #adminTabs .nav-link.active,
body[class] #adminTabs a.active {
    background: #fff;
    color: var(--rv-teal, #066F61);
    border-bottom-color: var(--rv-accent, #ECFC2B);
}

/* The old JS set an explicit pixel height here and animated the padding.
   Both are gone; let the content size itself. */
body[class] .tab-content {
    height: auto !important;
    padding: 0;
    transition: none;
}

body[class] .tab-content > .tab-pane {
    display: none;
}
body[class] .tab-content > .tab-pane.active {
    display: block;
}

/* Bootstrap's fade class adds an opacity transition that reads as a
   flicker when sections swap instantly. */
body[class] .tab-content > .tab-pane.fade {
    opacity: 1;
    transition: none;
}

@media (max-width: 768px) {
    body[class] .admin-subnav {
        top: 60px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[class] #adminTabs {
        flex-wrap: nowrap;
        min-width: max-content;
    }
    body[class] #adminTabs .nav-link,
body[class] #adminTabs a {
        padding: 12px 15px;
        font-size: 0.88rem;
        white-space: nowrap;
    }
}

/* ---- Neutralise the old tab chrome -------------------------------
   dashboard.php styles these with #adminTabs .nav-link (1,1,0), which
   outranks a plain class selector. Matching the ID here so the submenu
   isn't fighting rounded corners, 2px borders and an animated
   pseudo-element underline left over from the tab strip. */
body[class] #adminTabs .nav-link,
body[class] #adminTabs a {
    border: none;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    position: static;
}
body[class] #adminTabs .nav-link::after,
body[class] #adminTabs .nav-link::before,
body[class] #adminTabs a::after,
body[class] #adminTabs a::before {
    display: none;
    content: none;
}
body[class] #adminTabs .nav-item {
    margin: 0;
}
/* ============================================================
   admin-layout.css — alignment pass for dashboard.php sections.

   Append last:
       cat admin-layout.css >> .../public/assets/site.css

   The panes currently mix three alignments: section headings sit
   hard left against the pane edge, the forms are auto-centred in
   the middle of the pane, and several elements carry inline
   text-align:center. Inline styles need !important to override —
   the alternative is editing them out of the PHP, which is worth
   doing later but is a bigger change.
   ============================================================ */

/* ---- 1. One content column, one gutter -------------------------- */
body[class] .tab-content > .tab-pane {
    padding: 32px 36px 40px;
}

body[class] .tab-content > .tab-pane > h2 {
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rv-line, #C2D1D9);
    font-size: 1.6rem;
    text-align: left;
}

body[class] .tab-content > .tab-pane h3,
body[class] .tab-content > .tab-pane h4 {
    text-align: left !important;
    margin: 0 0 16px !important;
}

body[class] .tab-content > .tab-pane hr {
    margin: 32px 0 24px;
    border-color: var(--rv-line, #C2D1D9);
}

/* ---- 2. Forms align to the same left edge as the headings ------- */
body[class] .tab-pane .account-form,
body[class] .tab-pane #edit-video-form,
body[class] .tab-pane #add-video-form {
    max-width: 560px;
    margin: 0 0 8px;          /* was auto-centred */
    padding: 24px;
    background: #fff;
    border: 1px solid var(--rv-line, #C2D1D9);
}

body[class] .tab-pane .form-group {
    margin-bottom: 16px;
}

body[class] .tab-pane .form-group label,
body[class] .tab-pane .account-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

body[class] .tab-pane .form-control {
    width: 100%;
}

/* The submit buttons carry inline width:100% or are full-bleed. Size
   them to their label and keep them on the left. */
body[class] .tab-pane .account-form button[type="submit"],
body[class] .tab-pane #edit-video-form button[type="submit"],
body[class] .tab-pane #add-video-form button[type="submit"] {
    width: auto !important;
    min-width: 180px;
    padding: 11px 24px;
    margin-top: 4px;
}

/* ---- 3. Search rows -------------------------------------------- */
body[class] .tab-pane .search-form-custom {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 0 20px;
}
body[class] .tab-pane .search-form-custom .form-control {
    flex: 1;
}
body[class] .tab-pane .search-form-custom button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---- 4. Tables -------------------------------------------------- */
body[class] .tab-pane .table {
    margin-bottom: 24px;
}
body[class] .tab-pane .table th {
    text-align: left;
    background: var(--rv-tint, #F3F8F8);
    border-bottom: 2px solid var(--rv-line, #C2D1D9);
    font-size: 0.9rem;
}
body[class] .tab-pane .table td {
    text-align: left;
    vertical-align: middle;
}
/* Actions column reads better right-aligned against the row edge */
body[class] .tab-pane .table th:last-child,
body[class] .tab-pane .table td:last-child {
    text-align: right;
}
body[class] .tab-pane .table td:last-child .d-flex {
    justify-content: flex-end !important;
}

/* ---- 5. Horizontal overflow ------------------------------------
   Something inside the panes is wider than the viewport, which is
   why the header search box is clipped at the right edge. Tables are
   the usual culprit; .table-responsive only works if its parents
   allow shrinking. */
body[class] .tab-content,
body[class] .tab-content > .tab-pane,
body[class] .tab-pane .table-responsive {
    min-width: 0;
    max-width: 100%;
}
body[class] .tab-pane .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    body[class] .tab-content > .tab-pane {
        padding: 20px 16px 28px;
    }
    body[class] .tab-pane .account-form,
    body[class] .tab-pane #edit-video-form,
    body[class] .tab-pane #add-video-form {
        max-width: 100%;
        padding: 18px;
    }
    body[class] .tab-pane .search-form-custom {
        flex-direction: column;
    }
    body[class] .tab-pane .account-form button[type="submit"] {
        width: 100% !important;
    }
}
/* ============================================================
   riverside-fixes.css

   Corrections that follow from the brand theme recolouring
   surfaces the original CSS had painted for dark backgrounds.
   Every one of these is white-on-dark text stranded on a light
   panel, or ink-on-light text stranded on a dark one.

   This is the LAST file in the stylesheet chain:

     cp /root/css-branded/assets/site.css assets/site.css
     cat /root/riverside-theme.css       >> assets/site.css
     cat /root/admin-subnav.css          >> assets/site.css
     cat /root/admin-layout.css          >> assets/site.css
     cat /root/riverside-fixes.css       >> assets/site.css
     chown www-data:www-data assets/site.css

   Add new fixes here rather than appending to site.css directly,
   or the next rebuild drops them.
   ============================================================ */

/* ---- 1. Dark video modal ---------------------------------------
   .modal-content is #2d2d2d. The theme's h1-h4 ink colour makes
   the video title unreadable against it. */
body[class] .modal-content h1,
body[class] .modal-content h2,
body[class] .modal-content h3,
body[class] .modal-content h4,
body[class] .modal-content h5,
body[class] .modal-content .modal-title,
body[class] #videoTitle {
    color: #fff;
}

body[class] #videoDescription,
body[class] .modal-content .modal-body p {
    color: #e6eceb;
}

body[class] .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* The add-to-playlist modal is a white panel, so it needs the
   opposite treatment. Listed second so it wins on source order. */
body[class] #addToPlaylistModal .modal-content h1,
body[class] #addToPlaylistModal .modal-content h2,
body[class] #addToPlaylistModal .modal-content h3,
body[class] #addToPlaylistModal .modal-content h4,
body[class] #addToPlaylistModal .modal-content h5,
body[class] #addToPlaylistModal .modal-content .modal-title,
body[class] #addToPlaylistModal .modal-content p {
    color: var(--rv-ink, #363636);
}
body[class] #addToPlaylistModal .modal-content .btn-close {
    filter: none;
}

/* ---- 2. Logged-out homepage teaser ----------------------------
   .header-message was white for the dark .video-container the
   theme recoloured to the light tint. */
body[class] .header-message {
    color: var(--rv-ink, #363636);
    font-size: 1.1rem;
    text-align: center;
    margin: 0 0 24px;
}
body[class] .header-message .login {
    color: var(--rv-teal, #066F61);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body[class] .header-message .login:hover,
body[class] .header-message .login:focus {
    color: var(--rv-teal-dark, #00544A);
}

/* ---- 3. Mobile slide-out menu ---------------------------------
   Consolidating the CSS scoped each page's base rule to
   body.page-x .mobile-nav (0,2,1), which outranks the shared
   .mobile-nav.active (0,2,0), so the panel never slid in. */
body[class] .mobile-nav.active {
    left: 0;
}

/* ---- 4. Footer heading ----------------------------------------
   The theme's h2 rule was overriding the footer's own white
   heading, turning "Connect with us" near-black on teal. */
body[class] .footer-links h2 {
    color: #fff;
}

/* ---- 5. Section headings on recoloured panels -----------------
   These sat on the navy .page-container and were white. */
body[class] .group-header,
body[class] .group-header h2,
body[class] .shared-experience-header,
body[class] .shared-experience-header h3 {
    color: var(--rv-ink, #363636);
}

/* ---- 6. Typography --------------------------------------------
   Raleway is a display face. At 0.9em in long paragraphs it reads
   thin and cramped, and this audience is older caregivers reading
   clinical text. A humanist system stack is more legible at body
   sizes, costs zero requests, and can't be blocked by a hospital
   network filter the way the Google Fonts CDN can.

   Raleway is kept for headings, where it works. */
body[class] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body[class] h1,
body[class] h2,
body[class] h3,
body[class] h4,
body[class] .video-card-title,
body[class] .group-name {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ---- 7. Video cards -------------------------------------------
   Descriptions run 300+ characters straight from Vimeo, so card
   heights diverge wildly and the Watch buttons land at different
   places in every column. Clamp the copy and make the card a
   column so the button always sits on the bottom edge. */
body[class] .video-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
}

body[class] .video-card {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: 1px solid var(--rv-line, #C2D1D9);
    box-shadow: none;
    overflow: hidden;
}

body[class] .video-card:hover {
    transform: none;                 /* 1.05 scale blurred the thumbnails */
    border-color: var(--rv-teal, #066F61);
}

body[class] .video-card img {
    height: 190px;
    object-fit: cover;
}

body[class] .video-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 18px;
    gap: 10px;
}

body[class] .video-card-title {
    font-size: 1.08rem;
    margin: 0;
    color: var(--rv-ink, #363636);
}

/* Three lines, then ellipsis. The full text is in the modal. */
body[class] .video-card-desc {
    font-size: 0.95rem;
    color: #5a6a70;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body[class] .video-card .watch-btn {
    align-self: flex-start;
    margin-top: auto;                /* pins to the bottom of the card */
    position: static;
    border-radius: 0;
    padding: 10px 20px;
    font-weight: 700;
}

/* ---- 8. Video modal sizing ------------------------------------
   The description currently runs off the bottom of the modal with
   no way to scroll it. */
body[class] #videoModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}
body[class] #videoModal .modal-body,
body[class] #videoModal > .modal-content > div:last-child {
    overflow-y: auto;
}
body[class] #videoTitle {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 16px 0 8px;
    padding: 0 24px;
    text-align: left;
}
body[class] #videoDescription {
    font-size: 0.98rem;
    line-height: 1.6;
    padding: 0 24px 24px;
    margin: 0;
    text-align: left;
    max-height: 22vh;
    overflow-y: auto;
}