/* =========================================
   HOUSE OF STAPLETON
   FORMS.CSS
========================================= */

/* =========================================
   MOVIE SEARCH
========================================= */

.movie-search {

    display: flex;

    gap: 8px;

    margin-top: 15px;
}

.movie-search input {

    flex: 1;

    padding: 8px 10px;

    border: 1px solid rgba(0,0,0,.15);

    border-radius: 6px;

    font-size: .9rem;
}

.movie-search button {

    padding: 8px 12px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition: background .2s ease;
}

.movie-search button:hover {
    background: var(--color-gold-dark);
}

/* Results */

.search-results {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 12px;
}

.search-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px;

    text-decoration: none;

    border-radius: 6px;

    transition: background .2s ease;
}

.search-item:hover {
    background: rgba(0,0,0,.05);
}

.search-item img {

    width: 45px;
    height: 65px;

    object-fit: cover;

    border-radius: 4px;
}

.search-meta {

    display: flex;
    flex-direction: column;
}

.search-title {

    font-size: .9rem;
    font-weight: 600;

    color: #111;
}

.search-year {

    font-size: .8rem;

    color: #777;
}

.search-empty {

    margin-top: 10px;

    font-size: .9rem;

    color: #777;
}

/* =========================================
   SEARCH PAGE PANEL
========================================= */

.search-page .search-panel {

    max-width: 500px;

    margin: 0 auto 25px;

    padding: 15px;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 0 12px rgba(0,0,0,.12);
}

.search-page .search-panel .movie-search {

    max-width: 100%;

    margin: 0 0 12px;
}

.search-label {

    margin-bottom: 4px;

    font-size: .85rem;
    font-weight: 600;

    color: #666;
}

.search-page .movie-search input {
    background: #fafafa;
}

.search-page .search-panel form:not(:last-child) {

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(0,0,0,.05);
}

.search-page .search-item {
    gap: 14px;
}

.search-page .search-item img {

    width: 80px;

    height: auto;

    object-fit: contain;

    border-radius: 6px;

    box-shadow: 0 4px 10px rgba(0,0,0,.20);
}

/* =========================================
   ADMIN FORM SYSTEM
========================================= */

.admin-form {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.form-group {

    display: flex;

    flex-direction: column;
}

.form-group label {

    margin-bottom: 4px;

    font-size: .85rem;
    font-weight: 600;

    color: #444;
}

.admin-form input,
.admin-form textarea {

    padding: 8px 10px;

    font-size: .9rem;

    border: 1px solid rgba(0,0,0,.15);

    border-radius: 6px;
}

.admin-form textarea {
    resize: vertical;
}

.form-section {

    margin-bottom: 15px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(0,0,0,.05);
}

.form-actions {
    margin-top: 10px;
}

.form-actions button {

    padding: 10px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-weight: 600;

    cursor: pointer;
}

.form-actions button:hover {
    background: var(--color-gold-dark);
}

.btn-cancel {

    display: inline-block;

    padding: 6px 12px;

    text-decoration: none;

    font-size: .85rem;

    color: #777;

    background: rgba(0,0,0,.04);

    border: 1px solid rgba(0,0,0,.15);

    border-radius: 6px;

    transition: all .2s ease;
}

.btn-cancel:hover {

    background: rgba(0,0,0,.08);

    color: var(--color-gold);
}

/* =========================================
   MOVIE / TV DETAIL FORMS
========================================= */

.d1-title,
.d1-tv-title {
    text-align: center;
}

.d1-group,
.d1-tv-group {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}

.d1-label,
.d1-tv-label {

    width: 40%;

    text-align: left;

    font-weight: bold;
}

.d1-input,
.d1-select,
.d1-tv-input,
.d1-tv-select {

    width: 58%;

    padding: 8px;

    border-radius: 6px;
}

.d1-btn,
.d1-tv-btn {

    display: block;

    margin: 15px auto 0;

    height: 36px;

    padding: 0 18px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-size: .9rem;
    font-weight: 600;

    cursor: pointer;
}

.d1-btn:hover,
.d1-tv-btn:hover {
    background: #a93226;
}

.d1-success,
.d1-tv-success {

    text-align: center;

    color: green;

    margin-bottom: 10px;
}

/* =========================================
   CAST FORMS
========================================= */

.cast-movie-group,
.cast-tv-group {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}

.cast-movie-label,
.cast-tv-label {

    width: 40%;

    font-weight: bold;
}

.cast-movie-input,
.cast-movie-select,
.cast-tv-input,
.cast-tv-select {

    width: 58%;

    padding: 8px;

    box-sizing: border-box;

    border-radius: 6px;
}

.cast-movie-btn,
.cast-tv-btn {

    display: block;

    margin: 15px auto 0;

    height: 36px;

    padding: 0 18px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-size: .9rem;
    font-weight: 600;

    cursor: pointer;
}

.cast-movie-btn:hover,
.cast-tv-btn:hover {
    background: #a93226;
}

.cast-movie-success,
.cast-tv-success {

    text-align: center;

    color: green;

    margin-bottom: 10px;
}

/* =========================================
   TV GUIDE ADMIN
========================================= */

.tvguide-admin {

    max-width: 750px;

    margin: 0 auto;
}

.tvguide-admin .tg-row {

    display: grid;

    grid-template-columns:
        110px
        110px
        60px
        200px
        100px
        50px
        60px;

    gap: 8px;

    align-items: center;

    width: 100%;

    margin-bottom: 8px;
}

.tvguide-admin .tg-row > * {
    min-width: 0;
}

.tvguide-admin .tg-header {

    margin-bottom: 6px;

    font-size: .85rem;
    font-weight: 600;

    color: #555;
}

.tvguide-admin input,
.tvguide-admin select {

    width: 100%;

    padding: 6px 8px;

    box-sizing: border-box;

    border: 1px solid rgba(0,0,0,.20);

    border-radius: 6px;

    font-size: .85rem;
}

.tvguide-admin .tg-delete {

    display: flex;

    justify-content: center;
    align-items: center;

    height: 32px;

    padding: 0 10px;

    text-decoration: none !important;

    border: none;

    border-radius: 6px;

    background: #c0392b;

    color: #fff;

    font-size: .8rem;

    cursor: pointer;
}

.tvguide-admin .tg-delete:hover {
    background: #a93226;
}

.tvguide-admin .tg-save {

    height: 32px;

    padding: 0 12px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-size: .85rem;

    cursor: pointer;
}

.tvguide-admin .tg-save-main {

    display: block;

    margin: 15px auto 0;

    height: 36px;

    padding: 0 18px;

    border: none;

    border-radius: 6px;

    background: var(--color-gold);

    color: #fff;

    font-size: .85rem;
    font-weight: 600;

    cursor: pointer;
}

.tvguide-admin .tg-save:hover,
.tvguide-admin .tg-save-main:hover {
    background: var(--color-gold-dark);
}