/* t9p-tmv-style.css | Copyright (C) 2026 The 9 Dollar Plugins | GPLv2 or later */

.wrap { margin: 20px 10px 40px 1px; padding: 24px; background: #ffffff; border: 1px solid #c3c4c7; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); color: #000000; position: relative; clear: both; }
.t9p-tmv-header { margin-bottom: 24px; }
.wrap h1 { font-weight: 600; margin: 0; color: #099ccc; }
.t9p-tmv-logo { margin: 0 40px 0 20px; float: right; }
.t9p-tmv-logo img { width: 300px; height: auto; display: block; }
.t9p-tmv-intro { margin-bottom: 20px; }
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: middle; padding: 0 5px 5px 0; }
.icon-blue { color: #2668ed; width: 30px; height: 30px; vertical-align: bottom; padding: 0; font-weight: bold; }
.icon-black { color: #000000; width: 30px; height: 30px; }
.t9p-tmv-pro-bagde { display: inline-block; background-color: #cc0000; color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; line-height: 1.6; }
.t9p-tmv-rename-bagde-mobile { display: none; }
.t9p-tmv-status { position: sticky; top: 32px; z-index: 100; background: #ffffff; padding: 8px 12px; border-radius: 3px; min-height: 24px; margin-bottom: 12px; font-weight: 600; color: #228b22; transition: opacity 0.4s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.t9p-tmv-status:empty { padding: 0; box-shadow: none; }
.t9p-tmv-status.t9p-tmv-error { color: #c0392b; background: #fdf2f0; }
@keyframes t9p-tmv-apply-pulse {
 0% {
 opacity: 0;
 transform: scale(0.6);
}
 70% {
 opacity: 1;
 transform: scale(1.08);
}
 100% {
 opacity: 1;
 transform: scale(1);
}
}
#t9p-tmv-apply-btn.button.button-primary { display: none; margin-bottom: 16px !important; background-color: #099ccc; border-color: #099ccc; color: #ffffff; }
#t9p-tmv-apply-btn.button.button-primary:hover { background-color: #000000; border-color: #000000; }
#t9p-tmv-apply-btn.button.button-primary.t9p-tmv-pulse { animation: t9p-tmv-apply-pulse 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.t9p-tmv-topforms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; max-width: 70%; }
.t9p-tmv-topforms-grid .t9p-tmv-topform-style { display: block; width: 90%; }
.t9p-tmv-topforms-grid .t9p-tmv-topform-style p { margin: 0; }
.t9p-tmv-topforms-divider { grid-column: 1 / -1; border: none; border-top: 1px solid #aaaaaa; margin: 8px 0; }
.t9p-tmv-topforms-grid label { display: block; font-weight: 600; margin-bottom: 6px; }
.t9p-tmv-topforms-grid select { width: 100%; max-width: 300px; }
.t9p-tmv-topforms-grid select:disabled, .t9p-tmv-rename-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.t9p-tmv-width-wrap { display: flex; align-items: center; gap: 10px; max-width: 300px; }
.t9p-tmv-width-slider { flex: 1; width: 100%; accent-color: #099ccc; cursor: pointer; }
.t9p-tmv-width-value { font-weight: 600; color: #099ccc; white-space: nowrap; min-width: 40px; }
.t9p-tmv-width-disabled .t9p-tmv-width-slider { opacity: 0.5; cursor: not-allowed; }
.t9p-tmv-width-disabled .t9p-tmv-width-value { opacity: 0.5; }
#t9p-tmv-menu-search { width: 97%; }
.t9p-tmv-split-wrapper { display: flex; gap: 20px; margin-top: 30px; width: 100%; }
.t9p-tmv-left { flex: 2 1 70%; min-width: 0; }
.t9p-tmv-right { flex: 1 1 30%; background: #f1f1f1; padding: 20px; border: 1px solid #dddddd; border-radius: 3px; box-sizing: border-box; }
table.widefat { border-collapse: collapse; width: 100%; border: 1px solid #ccd0d4; border-radius: 3px; background: #ffffff; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
table.widefat thead { background-color: #099ccc; color: #ffffff; }
table.widefat thead th { padding: 12px 15px; text-align: left; font-weight: 600; color: #ffffff; white-space: nowrap; }
table.widefat tbody tr:nth-child(even) { background-color: #f1f1f1; }
table.widefat tbody tr:nth-child(odd) { background-color: #ffffff; }
table.widefat tbody tr:hover { background-color: #dddddd; }
table.widefat tbody td { padding: 8px 10px; vertical-align: middle; word-break: break-word; line-height: 1.5; border-top: 1px solid #f0f0f0; }
table.widefat tbody td .button, table.widefat tbody td .button-secondary { background-color: #099ccc; color: #ffffff; border: 1px solid transparent; padding: 0 14px; line-height: 2.15384615; border-radius: 3px; cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; font-size: 11px; }
table.widefat tbody td .button:hover, table.widefat tbody td .button-secondary:hover { background-color: #000000; color: #ffffff; }
table.widefat tbody tr.t9p-tmv-row-hidden td { opacity: 0.45; }
table.widefat tbody tr.t9p-tmv-row-hidden td:first-child { opacity: 1; }
tr.t9p-tmv-separator-row td { color: #8c8f94; }
tr.t9p-tmv-own-item td:first-child strong { color: #cc0000; font-weight: 700; }
.t9p-tmv-drag-col { width: 50px; text-align: center; }
.t9p-tmv-drag-handle { cursor: grab; user-select: none; display: inline-block; }
.t9p-tmv-drag-handle:active { cursor: grabbing; }
tr.t9p-tmv-sortable-placeholder td { background: #e8f5fa !important; border: 2px dashed #099ccc !important; }
.t9p-tmv-slug-col code { background: #f3f5f6; padding: 2px 6px; border-radius: 3px; color: #0071a1; word-break: break-all; }
.t9p-tmv-submenu-list { margin: 6px 0 0 0; padding: 0; list-style: none; }
.t9p-tmv-submenu-list li { margin-bottom: 4px; color: #50575e; }
.t9p-tmv-submenu-list li label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.t9p-tmv--orderbox:first-child { padding: 20px 20px 17px 20px; }
.t9p-tmv-orderbox { background: #1d2327; color: #ffffff; border-radius: 3px; padding: 20px 20px 8px 20px; box-shadow: inset 0 0 0 1px #32373c; margin-bottom: 20px; }
.t9p-tmv-orderbox h3 { margin-top: 0; font-size: 18px; color: #ffffff; }
.t9p-tmv-orderbox ul { list-style: none; padding: 0; }
.t9p-tmv-orderbox ul li { margin-bottom: 10px; padding-left: 4px; display: flex; align-items: flex-start; gap: 8px; }
.t9p-tmv-orderbox ul li .icon { flex-shrink: 0; padding: 0 5px 0 0; }
.t9p-tmv-orderbox a { color: #ffffff; text-decoration: underline; }
.t9p-tmv-orderbox a:hover { text-decoration: none; }
.t9p-tmv-orderbox-link { display: inline-block; margin: 10px 10px 0 0; background: #099ccc; color: #ffffff !important; padding: 10px 16px 8px 16px; border-radius: 3px; font-weight: 500; text-decoration: none !important; }
.t9p-tmv-orderbox-link:hover { background-color: #000000; }
.t9p-tmv-bmc { text-align: center; }
.t9p-tmv-bottom { text-align: center; margin-top: 40px; }
#fs_connect { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 99999 !important; width: 484px !important; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.25); border-radius: 4px; padding: 0; margin: 0 !important; }

@media (max-width: 1329px) {
.wrap { margin: 0 10px 30px; padding: 15px; }
.t9p-tmv-split-wrapper { flex-direction: column; }
.t9p-tmv-left, .t9p-tmv-right { flex: 1 1 100% !important; width: 100% !important; }
}

@media (max-width: 1023px) {
.t9p-tmv-logo img { width: 250px; }
}

@media (max-width: 699px) {
.t9p-tmv-logo img { width: 200px; }
.t9p-tmv-rename-bagde-mobile { display: inline-block; margin-left: 8px; }
table.widefat thead, table.widefat tbody, table.widefat tr, table.widefat th, table.widefat td { display: block; }
table.widefat thead tr { display: none; }
table.widefat tbody tr { margin-bottom: 10px; border: 1px solid #eeeeee; border-radius: 1px; }
table.widefat tbody td { padding-left: 38%; position: relative; border: none; white-space: normal; }
table.widefat tbody td::before { content: attr(data-label); position: absolute; left: 15px; font-weight: 600; color: #222222; }
table.widefat tbody td.t9p-tmv-checkbox-col { padding-left: 15px; }
table.widefat tbody td.t9p-tmv-drag-col { padding-left: 15px; text-align: right; padding-right: 15px; }
table.widefat tbody td.t9p-tmv-drag-col::before { display: none; }
.t9p-tmv-topforms-grid { max-width: 100%; }
.t9p-tmv-width-wrap { max-width: 100%; }
}

@media (max-width: 479px) {
.t9p-tmv-logo img { width: 140px; }
}

@media (max-width: 409px) {
.t9p-tmv-logo img { width: 90px; }
}