{
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
color: #333;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 700px;
margin: 30px auto 40px;
background: #fff;
padding: 10px 30px 10px 30px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 30px;
}
.container img {
display: block;
margin: auto;
width: 350px;
border-radius: 6px;
box-shadow: 0 6px 15px rgb(0 0 0 / 0.35);
}

header h1 {
margin: 0;
font-size: 2.2rem;
font-weight: 700;
color: #222;
}

.description {
font-size: 1.1rem;
line-height: 1.5;
color: #444;
max-width: 900px;
margin: 0 auto;
}

.watch-btn {
display: block;
margin: auto;
}
.link { 
    text-decoration: none;
   }
.watch-btn button {
display: block;
margin: auto;
background: linear-gradient(135deg, #ff416c, #ff4b2b);
border: none;
color: white;
font-size: 1.55rem;
font-weight: 600;
padding: 14px 40px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 6px 15px rgb(255 75 43 / 0.6);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
user-select: none;
}
.watch-btn button:hover,
.watch-btn button:focus {
background: linear-gradient(135deg, #ff4b2b, #ff416c);
transform: scale(1.05);
box-shadow: 0 8px 20px rgb(255 75 43 / 0.8);
outline: none;
}

.rating {
display: block;
margin: auto;
}
.star {
width: 28px;
height: 28px;
fill: #ccc;
cursor: default;
transition: fill 0.3s ease;
}
.star.filled {
fill: #ffb400;
filter: drop-shadow(0 0 2px #ffb400);
}
.star1{

margin: auto;
	width: 28px;
height: 28px;
filter: drop-shadow(0 0 2px #ffb400);
cursor: default;
transition: fill 0.3s ease;
}

.comments {
width: 100%;
margin: 0 auto;
text-align: left;
}
.comments h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #222;
}
.comment {
background: #fafafa;
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}
.comment .author {
font-weight: 600;
margin-bottom: 6px;
color: #333;
}
.comment .text {
font-size: 1rem;
color: #555;
white-space: pre-wrap;
}

form.comment-form {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
form.comment-form label {
font-weight: 600;
color: #333;
}
form.comment-form input[type="text"],
form.comment-form textarea {
width: 100%;
padding: 10px 0px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
resize: vertical;
transition: border-color 0.3s ease;
}
form.comment-form input[type="text"]:focus,
form.comment-form textarea:focus {
border-color: #ff4b2b;
outline: none;
box-shadow: 0 0 6px rgb(255 75 43 / 0.5);
}
form.comment-form button {
align-self: baseline ;
background: #ff4b2b;
color: white;
border: none;
padding: 12px 36px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
user-select: none;
}
form.comment-form button:hover,
form.comment-form button:focus {
background: #ff416c;
transform: scale(1.02);
outline: none;
}

footer {
width: 100%;
padding: 15px 0;
background: #222;
color: #eee;
font-size: 0.9rem;
text-align: center;
border-top: 1px solid #444;
margin-top: 30px;
}