/*
  Privnote.chat main style
  Extracted from index.html
*/
:root {
--primary-color: #2c3e50;
--accent-color: #e74c3c;
--light-accent: #f39c12;
--dark-bg: #1a1a2e;
--light-bg: #f8f9fa;
--success-color: #27ae60;
--warning-color: #f1c40f;
--text-light: #ecf0f1;
--text-dark: #2c3e50;
--border-radius: 10px;
--box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

* {
box-sizing: border-box;
transition: all 0.3s ease;
}

body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--text-dark);
background: linear-gradient(135deg, #f5f7fa 0%, #e5e9f2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* Header styles */
.site-header {
background: linear-gradient(to right, var(--primary-color), var(--dark-bg));
padding: 1rem;
color: var(--text-light);
box-shadow: var(--box-shadow);
}

.logo-text {
font-size: 2.5rem;
font-weight: 700;
margin: 0;
color: white;
letter-spacing: -0.5px;
}

.logo-text i {
color: var(--light-accent);
animation: pulse 3s infinite;
}

.tagline {
font-size: 1rem;
opacity: 0.9;
font-weight: 300;
letter-spacing: 0.5px;
}

/* Main container */
.main-container {
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}

/* Ensure consistent heading spacing */
.main-container h5:first-of-type {
margin-top: 0.5rem;
}

.main-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, var(--accent-color), var(--light-accent));
}

.section-title {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1.5rem;
display: inline-flex;
align-items: center;
cursor: pointer;
}

.section-title i {
margin-right: 0.5rem;
color: var(--accent-color);
}

/* Info box */
.info-box {
background-color: rgba(44, 62, 80, 0.05);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--accent-color);
}

/* Textarea styling */
.form-control {
border: 2px solid transparent;
border-radius: var(--border-radius);
padding: 1rem;
font-size: 1rem;
transition: all 0.3s ease;
}

textarea.form-control {
resize: none;
font-family: 'Roboto Mono', monospace;
line-height: 1.6;
background-color: white !important;
border: 2px solid #e5e9f2;
}

textarea.form-control:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
border-color: var(--accent-color);
}

/* Custom textarea for input */
#myTextarea {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9)) !important;
border-left: 4px solid var(--primary-color);
}

#HiddenTextarea {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9)) !important;
border-left: 4px solid var(--accent-color);
}

/* Buttons */
.btn {
border-radius: 50px;
padding: 0.75rem 1.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-primary {
background-color: var(--accent-color);
border-color: var(--accent-color);
}

.btn-primary:hover {
background-color: #c0392b;
border-color: #c0392b;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-outline-secondary {
color: var(--primary-color);
border-color: var(--primary-color);
}

.btn-outline-secondary:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-outline-warning {
color: var(--light-accent);
border-color: var(--light-accent);
}

.btn-outline-warning:hover {
background-color: var(--light-accent);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Result link box */
#resultlink {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
border: none;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-top: 1.5rem;
margin-bottom: 1.5rem;
overflow: hidden;
}

#resultlink .card-body {
padding: 1.5rem;
}

#resultlink h6 {
color: var(--accent-color);
font-weight: 600;
margin-bottom: 1rem;
text-shadow: none !important;
}

.list-group-item {
border-radius: 5px !important;
margin-bottom: 0.5rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.list-group-item-success {
background-color: rgba(39, 174, 96, 0.1);
color: var(--success-color);
border-left: 3px solid var(--success-color);
}

.list-group-item-warning {
background-color: rgba(241, 196, 15, 0.1);
color: #d35400;
border-left: 3px solid var(--warning-color);
}

/* Optional settings section */
#demo {
background: linear-gradient(to right, var(--primary-color), #34495e);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
box-shadow: var(--box-shadow);
}

#demo h6, #demo h5 {
color: white;
margin-bottom: 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-weight: 600;
}

#demo .form-select, #demo .form-control {
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.15);
color: white;
font-weight: 500;
}

#demo .form-select option {
background-color: var(--primary-color);
color: white;
}

#demo .form-select:focus, #demo .form-control:focus {
background-color: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

#demo small {
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}

#demo .form-check-label {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}

#expireShow {
margin-top: 6px;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 1em;
font-weight: 500;
background-color: rgba(255, 255, 255, 0.1);
padding: 5px 10px;
border-radius: 4px;
}

/* After section */
.after-section {
background-color: white;
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--box-shadow);
}

.after-section h3 {
color: var(--primary-color);
margin-bottom: 1rem;
}

.after-section .lead {
color: var(--text-dark);
opacity: 0.8;
}

/* Footer */
footer {
background-color: var(--primary-color);
color: var(--text-light);
padding: 1.5rem 0;
margin-top: 2rem;
width: 100%;
}

footer a {
color: var(--text-light) !important;
opacity: 0.8;
text-decoration: none;
}

footer a:hover {
opacity: 1;
}

/* Alert styling */
.alert-success {
background-color: rgba(39, 174, 96, 0.1);
border-color: var(--success-color);
color: var(--success-color);
border-radius: var(--border-radius);
padding: 1rem;
}

/* Info box content */
#demo2 {
background-color: rgba(44, 62, 80, 0.05);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary-color);
color: var(--text-dark) !important;
}

/* Animation keyframes */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

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

.rotate {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: 2;
}

.rotate2 {
animation: spin 1s linear infinite;
}

@keyframes spin {
100% { transform: rotate(360deg); }
}

/* Modal styling */
.modal-content {
border-radius: var(--border-radius);
overflow: hidden;
}

.modal-header {
background-color: var(--primary-color);
color: white;
border-bottom: none;
}

.modal-title {
font-weight: 600;
}

.modal-footer {
border-top: none;
}

/* Tab navigation custom style */
.nav-tabs {
  border-bottom: 3px solid var(--accent-color);
  background: linear-gradient(90deg, #fff 60%, #f9eaea 100%);
  box-shadow: 0 2px 8px rgba(231,76,60,0.07);
}
.nav-tabs .nav-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary-color);
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  margin: 0 1.5rem 0 0;
  padding: 0.8rem 2.2rem 0.8rem 2.2rem;
  border-radius: 1.5rem 1.5rem 0 0;
  transition: all 0.2s;
  position: relative;
}
.nav-tabs .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, var(--accent-color) 60%, var(--light-accent) 100%);
  border-bottom: 3px solid var(--accent-color);
  box-shadow: 0 4px 16px rgba(231,76,60,0.13);
  z-index: 2;
}
.nav-tabs .nav-link:not(.active):hover {
  color: var(--accent-color);
  background: #fbeee7;
  border-bottom: 3px solid var(--light-accent);
}
@media (max-width: 600px) {
  .nav-tabs .nav-link {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    margin: 0 0.5rem 0 0;
  }
}

/* Tab content layout */
.tab-content {
  min-height: 520px;
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}
.tab-pane {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: none;
}
.tab-pane.active, .tab-pane.show {
  display: block;
}
@media (max-width: 600px) {
  .tab-content {
    min-height: 0;
    padding-top: 0.2rem;
    padding-bottom: 1rem;
  }
  .tab-pane {
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
.logo-text {
font-size: 2rem;
}
.btn {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
/* Adjust heading spacing on mobile */
.main-container h5:first-of-type {
margin-top: 0.5rem !important;
padding-top: 0.5rem !important;
}
.main-container {
padding: 1.5rem;
}
}