/* TheGameHosting — páginas HEREDADAS (twenty-one y standard_cart que el tema no copia).
   Re-pinta en oscuro lo que Bootstrap 4, twenty-one y standard_cart dejan claro. Solo colores, bordes y radios:
   no cambia la estructura de las páginas. Tokens de custom.css (--tgh-*).
   Ojo: standard_cart carga su all.min.css DENTRO del <body> (después de esta hoja), por eso las reglas del carrito
   van con #order-standard_cart (y :not(.tgh-cart) para no tocar las páginas propias de tgh_cart). */

/* 1. Bootstrap 4 que custom.css no cubre */
.tgh .text-secondary,.tgh .text-black-50,.tgh .blockquote-footer,.tgh .figure-caption,.tgh caption{color:var(--tgh-muted2)!important}
.tgh .text-body,.tgh .text-dark,.tgh .text-reset{color:var(--tgh-text)!important}
.tgh .bg-secondary,.tgh .bg-gray{background-color:var(--tgh-raised)!important}
.tgh .bg-dark{background-color:var(--tgh-bg2)!important}
.tgh .bg-primary{background-color:var(--tgh-accent)!important}
.tgh .bg-info{background-color:#1a1f4a!important;color:#E0E3FF}
.tgh .bg-success{background-color:#11283a!important;color:#D5F8E8}
.tgh .bg-warning{background-color:#2a2530!important;color:#FDE7B0}
.tgh .bg-danger{background-color:#2a1530!important;color:#FFD9E0}
.tgh pre{color:var(--tgh-text);background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:10px;padding:12px 14px}
.tgh kbd{background:var(--tgh-raised);color:#fff}
.tgh mark,.tgh .mark{background:rgba(250,191,38,.22);color:#fff;padding:0 .2em}
.tgh .img-thumbnail{background:var(--tgh-bg2);border-color:var(--tgh-line)}
.tgh .border-left,.tgh .border-right{border-color:var(--tgh-line)!important}
.tgh .jumbotron,.tgh .well{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .progress{background:var(--tgh-bg2);border-radius:6px}
.tgh .progress-bar{background-color:var(--tgh-accent)}
.tgh .toast{background:var(--tgh-surface);border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .toast-header{background:var(--tgh-bg2);border-color:var(--tgh-line);color:#fff}
.tgh .popover-header{background:var(--tgh-bg2);border-color:var(--tgh-line);color:#fff}
.tgh .bs-popover-bottom>.arrow::after,.tgh .bs-popover-auto[x-placement^=bottom]>.arrow::after{border-bottom-color:var(--tgh-surface)}
.tgh .bs-popover-top>.arrow::after,.tgh .bs-popover-auto[x-placement^=top]>.arrow::after{border-top-color:var(--tgh-surface)}
.tgh .dropdown-header{color:var(--tgh-muted2)}
.tgh .dropdown-item.active,.tgh .dropdown-item:active{background:var(--tgh-bg2);color:#fff}
.tgh .nav-pills .nav-link{color:var(--tgh-text);border-radius:10px}
.tgh .nav-pills .nav-link.active,.tgh .nav-pills .show>.nav-link{background:var(--tgh-raised);color:#fff;box-shadow:inset 0 0 0 1px var(--tgh-yellow)}
.tgh .nav-tabs .nav-link.disabled{color:var(--tgh-muted)}
.tgh .card-header-tabs .nav-link.active{background:transparent}
/* Tablas */
.tgh .table thead.thead-light th,.tgh .table .thead-light th{background:var(--tgh-bg2);color:var(--tgh-muted2);border-color:var(--tgh-line)}
.tgh .table-bordered,.tgh .table-bordered th,.tgh .table-bordered td{border-color:var(--tgh-line)}
.tgh .table-active,.tgh .table-active>td,.tgh .table-active>th,.tgh .table-light,.tgh .table-light>td,.tgh .table-light>th,.tgh .table-secondary,.tgh .table-secondary>td,.tgh .table-secondary>th{background:var(--tgh-bg2)!important;color:#fff}
.tgh .table-success,.tgh .table-success>td,.tgh .table-success>th{background:#11283a!important;color:#D5F8E8}
.tgh .table-info,.tgh .table-info>td,.tgh .table-info>th,.tgh .table-primary,.tgh .table-primary>td,.tgh .table-primary>th{background:#1a1f4a!important;color:#E0E3FF}
.tgh .table-warning,.tgh .table-warning>td,.tgh .table-warning>th{background:#2a2530!important;color:#FDE7B0}
.tgh .table-danger,.tgh .table-danger>td,.tgh .table-danger>th{background:#2a1530!important;color:#FFD9E0}
.tgh .table th{color:#fff}
.tgh .table tfoot td,.tgh .table tfoot th{border-color:var(--tgh-line);color:#fff}
/* Alertas, insignias y botones que faltan */
.tgh .alert-primary{border-color:rgba(110,123,255,.5);background:#1a1f4a;color:#E0E3FF}
.tgh .alert-secondary,.tgh .alert-light,.tgh .alert-dark,.tgh .alert-default{border-color:var(--tgh-line);background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh .alert .alert-link{color:inherit}
.tgh .alert .close{color:inherit}
.tgh .badge-secondary,.tgh .badge-light,.tgh .badge-dark,.tgh .badge-default{background:var(--tgh-raised);color:#fff}
.tgh a.badge:hover,.tgh a.badge:focus{filter:brightness(1.1)}
.tgh .btn-dark,.tgh .btn-outline-dark,.tgh .btn-outline-light{background:var(--tgh-surface);border-color:var(--tgh-line);color:#fff!important}
.tgh .btn-dark:hover,.tgh .btn-outline-dark:hover,.tgh .btn-outline-light:hover{border-color:var(--tgh-accent);color:#fff!important}
.tgh .btn-outline-warning{background:transparent;border-color:rgba(250,191,38,.6);color:var(--tgh-yellow)!important}
.tgh .btn-default.active,.tgh .btn-default:active,.tgh .open>.dropdown-toggle.btn-default,.tgh .btn-secondary:not(:disabled):not(.disabled).active,.tgh .btn-secondary:not(:disabled):not(.disabled):active{background:var(--tgh-raised);border-color:var(--tgh-yellow);color:#fff!important}
.tgh .btn-group>.btn.active{background:var(--tgh-raised);border-color:var(--tgh-yellow);color:#fff!important}
.tgh .btn-group-toggle>.btn input{position:absolute;clip:rect(0,0,0,0);pointer-events:none}
/* Etiquetas de Bootstrap 3 (.label-*) que usan twenty-one y standard_cart: mismas que .tgh-tag */
.tgh .label{display:inline-flex;align-items:center;gap:6px;border-radius:20px;font-size:12px;font-weight:600;padding:4px 10px;line-height:1.2;white-space:nowrap}
.tgh .label-default,.tgh .label-grey,.tgh .label-secondary{background:rgba(180,184,216,.12);color:#C9CCE6}
.tgh .label-primary,.tgh .label-info{background:rgba(110,123,255,.16);color:#B9BFFF}
.tgh .label-success{background:rgba(61,220,151,.12);color:var(--tgh-ok)}
.tgh .label-warning{background:rgba(250,191,38,.14);color:var(--tgh-yellow)}
.tgh .label-danger{background:rgba(255,92,122,.14);color:#FF8DA1}
/* Formularios */
.tgh .form-control-plaintext{color:#fff}
.tgh .custom-file-label{background:var(--tgh-bg2);border-color:var(--tgh-line);color:var(--tgh-text);border-radius:10px}
.tgh .custom-file-label::after{background:var(--tgh-raised);color:#fff;border-color:var(--tgh-line)}
.tgh .custom-control-label{color:var(--tgh-text)}
.tgh .custom-control-input:disabled~.custom-control-label{color:var(--tgh-muted)}
.tgh .custom-switch .custom-control-label::after{background:var(--tgh-muted2)}
.tgh .custom-switch .custom-control-input:checked~.custom-control-label::after{background:var(--tgh-yellow-ink)}
.tgh .custom-range::-webkit-slider-runnable-track{background:var(--tgh-raised)}
.tgh .input-group-text{color:var(--tgh-text)}
.tgh .form-control[type=file]{height:auto;padding:10px 14px}
.tgh fieldset[disabled] .form-control{background:#121535}
.tgh .bootstrap-switch{border-color:var(--tgh-line);background:var(--tgh-bg2)}
.tgh .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.tgh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{background:var(--tgh-raised);color:#fff}
.tgh .bootstrap-switch .bootstrap-switch-label{background:var(--tgh-surface);color:#fff}
/* List groups de colores */
.tgh .list-group-item-secondary,.tgh .list-group-item-light,.tgh .list-group-item-dark{background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh .list-group-item-primary,.tgh .list-group-item-info{background:#1a1f4a;color:#E0E3FF}
.tgh .list-group-item-success{background:#11283a;color:#D5F8E8}
.tgh .list-group-item-warning{background:#2a2530;color:#FDE7B0}
.tgh .list-group-item-danger{background:#2a1530;color:#FFD9E0}
.tgh .list-group-item-action{color:var(--tgh-text)}
/* Bootstrap 3 .panel (standard_cart y módulos viejos) */
.tgh .panel{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text);box-shadow:none}
.tgh .panel-heading,.tgh .panel-footer{background:transparent;border-color:var(--tgh-line);color:#fff}
.tgh .panel-title{color:#fff;font-family:var(--tgh-f-title)}
.tgh .panel-default>.panel-heading,.tgh .panel-primary>.panel-heading,.tgh .panel-info>.panel-heading{background:var(--tgh-bg2);border-color:var(--tgh-line);color:#fff}
.tgh .well{box-shadow:none}

/* Insignias: el índigo de marca con texto blanco da 3.5:1 en letra pequeña; uno un poco más oscuro llega a 4.7:1 */
.tgh .badge-info,.tgh .badge-primary{background:#5664F0;color:#fff}
.tgh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,.tgh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{background:var(--tgh-ok);color:#06281a}
.tgh .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,.tgh .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{background:var(--tgh-raised);color:#fff}
.tgh .primary-bg-color{background-color:var(--tgh-bg2)}
/* Listas de twenty-one (dominios, cotizaciones, SSL, afiliados…): la tabla va en tarjeta, no suelta sobre la foto */
.tgh .table-container{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);padding:8px 16px 12px;margin-bottom:16px;max-width:100%;overflow-x:auto}
.tgh .table-container .dataTables_wrapper .dataTables_info,.tgh .table-container .dataTables_wrapper .dataTables_paginate{padding-top:12px}
.tgh .table-bordered{border-radius:12px}

/* 2. Twenty-One: piezas propias en claro */
.tgh .sidebar .list-group-item .badge{background:var(--tgh-raised);color:#fff}
.tgh .sidebar .list-group-item>i.far.fa-circle{color:var(--tgh-muted2)}
.tgh .action-icon-btns a{background:var(--tgh-bg2);border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .action-icon-btns a:hover{color:#fff;border-color:var(--tgh-accent)}
.tgh .responsive-tabs-sm,.tgh .responsive-tabs-sm .nav-item a.active,.tgh .responsive-tabs-sm-connector .channel{background:var(--tgh-surface)}
.tgh .responsive-tabs-sm .nav-item a{color:var(--tgh-text)}
.tgh .responsive-tabs-sm .nav-item a:hover{background:var(--tgh-bg2);color:#fff}
.tgh .responsive-tabs-sm-connector .bottom-border{border-color:var(--tgh-line)}
.tgh .select-account a{color:var(--tgh-text)}
.tgh .select-account a:hover,.tgh .continue-container,.tgh .invite-box{background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh .twofa-setup .backup-code{background:var(--tgh-bg2);color:#fff;border:1px solid var(--tgh-line)}
.tgh .verification-banner{background:var(--tgh-surface);color:var(--tgh-text);border-bottom:1px solid var(--tgh-line)}
.tgh .verification-banner .fas,.tgh .verification-banner .fal,.tgh .verification-banner .far{color:var(--tgh-yellow)}
.tgh .verification-banner .btn.close{color:var(--tgh-muted2)}
.tgh .home-domain-search .input-group-wrapper{background:var(--tgh-bg2);border:1px solid var(--tgh-line)}
.tgh .home-domain-search{background:var(--tgh-surface)}
.tgh .ticketfeedbackstaffcont{background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:12px;color:var(--tgh-text)}
.tgh .ticketfeedbackstaffcont .ticketfeedbackrating .rate{color:var(--tgh-text)}
.tgh div.credit-card{background:var(--tgh-bg2);border:1px solid var(--tgh-line);color:var(--tgh-text)}
.tgh div.credit-card div.card-number{background:var(--tgh-raised);color:#fff}
.tgh div.credit-card .logo-visa,.tgh div.credit-card .logo-discover{color:#fff}
.tgh .invoice-summary-table td,.tgh .invoice-summary-table th{border-color:var(--tgh-line);color:#fff}
.tgh .invoice-summary-table td.total-row,.tgh tr.masspay-total td{background:var(--tgh-bg2)!important;color:#fff}
.tgh div.product-details-tab-container{background:var(--tgh-surface);border-color:var(--tgh-line)}
.tgh div.product-details div.product-icon{background:var(--tgh-raised);color:#fff}
.tgh .kb-category a:hover,.tgh .kb-article-item:hover{background:var(--tgh-bg2)}
.tgh .announcements .announcement article{background:var(--tgh-surface)}
.tgh .client-home-cards .card-header{background:transparent}
.tgh a.admin-inline-edit:hover{color:#fff}
/* Upgrade/downgrade */
.tgh .upgrade .product-to-be-upgraded{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .upgrade .products .product{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .upgrade .products .product .header{background:transparent;color:#fff;border-color:var(--tgh-line)}
.tgh .upgrade .products .product .current,.tgh .upgrade .products .product .recommended{background:var(--tgh-yellow);color:var(--tgh-yellow-ink)}
.tgh .upgrade .products .product ul li{border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .upgrade .products .product ul li span{color:#fff}
.tgh .upgrade .products .product .price{color:#fff}
.tgh .upgrade .products .product .footer{background:transparent;border-color:var(--tgh-line)}
/* Dominios (precios, TLD destacados) */
.tgh .featured-tld{background:var(--tgh-surface);border:1px solid var(--tgh-line);color:var(--tgh-text)}
.tgh .featured-tld .price{background:var(--tgh-bg2);color:#fff}
.tgh .featured-tld .img-container{background:transparent}
.tgh .domain-pricing .tld-pricing-header .col-xs-2,.tgh .domain-pricing .tld-pricing-header .col-sm-2,.tgh .domain-pricing .tld-pricing-header .col-xs-4,.tgh .domain-pricing .tld-pricing-header .col-sm-4,.tgh .domain-pricing .tld-pricing-header div:nth-child(odd){background:var(--tgh-bg2);color:#fff;border-color:var(--tgh-line)}
.tgh .domain-pricing .tld-row{border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .domain-pricing .tld-row.highlighted{background:var(--tgh-bg2)}
.tgh .domain-pricing .tld-row>div,.tgh .domain-pricing .tld-pricing-header div{border-color:var(--tgh-line)}
.tgh .tld-sale-group-sale,.tgh .tld-sale-group-hot{background:var(--tgh-yellow);color:var(--tgh-yellow-ink)}
.tgh .tld-sale-group{border-radius:20px}
.tgh .tld-sale-group-new{background:var(--tgh-ok);color:#06281a}
/* Estado de red */
.tgh .network-issue{border-color:var(--tgh-line)}

/* 3. standard_cart heredado (renovaciones, addons, dominios, errores…) — no toca las páginas de tgh_cart */
.tgh #order-standard_cart:not(.tgh-cart){color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) label,.tgh #order-standard_cart:not(.tgh-cart) p.domain-renewal-desc,.tgh #order-standard_cart:not(.tgh-cart) .service-renewals .div-renewal-period-label{color:var(--tgh-muted2);font-weight:500}
.tgh #order-standard_cart:not(.tgh-cart) .header-lined h1{margin:0 0 16px;color:var(--tgh-title)}
.tgh #order-standard_cart:not(.tgh-cart) .field,.tgh #order-standard_cart:not(.tgh-cart) .form-control{background-color:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:10px;color:#fff;box-shadow:none}
.tgh #order-standard_cart:not(.tgh-cart) .field[disabled],.tgh #order-standard_cart:not(.tgh-cart) .field[readonly],.tgh #order-standard_cart:not(.tgh-cart) .form-control[disabled],.tgh #order-standard_cart:not(.tgh-cart) .form-control[readonly]{background-color:#121535;color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) .field:focus,.tgh #order-standard_cart:not(.tgh-cart) .form-control:focus{border-color:var(--tgh-accent);box-shadow:0 0 0 3px rgba(110,123,255,.25)}
.tgh #order-standard_cart:not(.tgh-cart) select.form-control option{background:var(--tgh-bg2);color:#fff}
.tgh #order-standard_cart .form-control.domain-renewals-filter,.tgh #order-standard_cart .form-control.service-renewals-filter{background-color:var(--tgh-bg2)!important;border:1px solid var(--tgh-line)!important;border-radius:10px!important;color:#fff;height:40px!important}
.tgh #order-standard_cart:not(.tgh-cart) .sub-heading,.tgh #order-standard_cart:not(.tgh-cart) .sub-heading-borderless{height:auto;border-top:0;text-align:left;margin:24px 0 12px}
.tgh #order-standard_cart:not(.tgh-cart) .sub-heading span,.tgh #order-standard_cart:not(.tgh-cart) .sub-heading-borderless span{position:static;padding:0;background:none;color:#fff;font:700 17px var(--tgh-f-title)}
/* Renovaciones de servicios y dominios */
.tgh #order-standard_cart .service-renewals-quick-filter{min-height:40px;border-color:rgba(255,255,255,.18)}
.tgh #order-standard_cart .domain-renewals,.tgh #order-standard_cart .service-renewals{display:grid;gap:12px;margin:10px 0 20px;border:0;background:transparent}
.tgh #order-standard_cart .domain-renewals .domain-renewal,.tgh #order-standard_cart .service-renewals .service-renewal,.tgh #order-standard_cart .domain-renewals .domain-renewal:nth-child(even),.tgh #order-standard_cart .service-renewals .service-renewal:nth-child(even){margin:0;padding:20px;background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh #order-standard_cart .service-renewals .service-renewal h3,.tgh #order-standard_cart .domain-renewals .domain-renewal h3{margin:0 0 4px;color:#fff;font-size:20px;line-height:1.3}
.tgh #order-standard_cart .service-renewals .service-renewal h4{margin:0 0 10px;color:var(--tgh-text);font:500 15px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.tgh #order-standard_cart .service-renewals .service-renewal p,.tgh #order-standard_cart .domain-renewals .domain-renewal p{color:var(--tgh-text);font-size:14px}
.tgh #order-standard_cart .service-renewals .div-renewal-period-label{margin:0 0 2px;font-size:13px}
.tgh #order-standard_cart .service-renewals .service-renewal .clearfix>.float-left>div:not(.div-renewal-period-label){color:#fff;font-size:14px}
.tgh #order-standard_cart .service-renewals .div-renewal-ineligible{color:#FDE7B0;font-weight:500}
.tgh #order-standard_cart .service-renewals .div-renewal-ineligible i{color:var(--tgh-yellow)}
.tgh #order-standard_cart .service-renewals .service-renewal .label,.tgh #order-standard_cart .domain-renewals .domain-renewal .label{border-radius:20px}
.tgh #order-standard_cart .addon-renewals{margin-top:16px}
.tgh #order-standard_cart .addon-renewals h4{color:#fff;font:700 15px var(--tgh-f-title);margin:0 0 8px}
.tgh #order-standard_cart .addon-renewals>div{border:1px solid var(--tgh-line);border-radius:12px;overflow:hidden}
.tgh #order-standard_cart .addon-renewals .service-renewal,.tgh #order-standard_cart .addon-renewals .service-renewal:nth-child(even){background:var(--tgh-bg2);border:0;border-bottom:1px solid var(--tgh-line);border-radius:0}
.tgh #order-standard_cart .btn-add-renewal-to-cart{min-height:40px}
.tgh #order-standard_cart .domain-renewal .form-group{margin:12px 0}
/* Texto y enlaces sueltos sobre la foto del fondo («Showing 3 of 4… Show all») */
.tgh #order-standard_cart:not(.tgh-cart) .secondary-cart-body>.text-center{color:var(--tgh-on-photo);margin-bottom:8px}
.tgh #order-standard_cart:not(.tgh-cart) .secondary-cart-body>.text-center a,.tgh #order-standard_cart:not(.tgh-cart) .header-lined a:not(.btn){color:#DDE0FF;text-decoration:underline;text-underline-offset:2px}
.tgh #order-standard_cart:not(.tgh-cart) #linkShowAll,.tgh #order-standard_cart:not(.tgh-cart) .secondary-cart-body>.text-center a{color:#fff;text-shadow:0 1px 3px rgba(5,6,20,.9)}
/* Tarjetas de producto de standard_cart (addons.tpl «Product Addons» y otras con .products .product):
   como las tarjetas de planes de la tienda: oscuras, título blanco, select oscuro, precio grande a la izquierda y botón a la derecha */
.tgh #order-standard_cart:not(.tgh-cart) .products .row-eq-height>[class*=col-]{display:flex;margin-bottom:20px}
.tgh #order-standard_cart:not(.tgh-cart) .products .product{display:flex;flex-direction:column;width:100%;margin:0;padding:22px;background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text);transition:border-color .15s,box-shadow .15s}
.tgh #order-standard_cart:not(.tgh-cart) .products .product form{display:flex;flex-direction:column;flex:1 1 auto;align-items:stretch;gap:14px}
.tgh #order-standard_cart:not(.tgh-cart) .products .product form>.clearfix{display:none}
.tgh #order-standard_cart:not(.tgh-cart) .products .product header{position:static;margin:0;padding:0;background:none;border:0;border-radius:0;max-width:none;flex:none}
.tgh #order-standard_cart:not(.tgh-cart) .products .product header span{display:block;margin:0;color:#fff;font:800 20px/1.25 var(--tgh-f-title)}
.tgh #order-standard_cart:not(.tgh-cart) .products .product header .qty{color:var(--tgh-muted2);font-style:normal}
.tgh #order-standard_cart:not(.tgh-cart) .products .product div.product-desc{float:none;width:auto;padding:0;color:var(--tgh-text);font-size:14px}
.tgh #order-standard_cart:not(.tgh-cart) .products .product div.product-desc p{margin:0 0 12px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .products .product div.product-desc p:empty{display:none}
.tgh #order-standard_cart:not(.tgh-cart) .products .product .form-group{display:block;margin:0;width:100%}
.tgh #order-standard_cart:not(.tgh-cart) .products .product select{width:100%;height:48px;padding:0 38px 0 14px;text-overflow:ellipsis}
.tgh #order-standard_cart:not(.tgh-cart) .products .product span.feature-value{color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .products .product footer{float:none;width:auto;max-width:none;flex:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--tgh-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;text-align:left!important;font-size:14px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .products .product div.product-pricing{margin:0;color:var(--tgh-muted2);font-size:13px;line-height:1.4}
.tgh #order-standard_cart:not(.tgh-cart) .products .product div.product-pricing span.price{display:block;color:#fff;font:800 22px/1.2 var(--tgh-f-title)}
.tgh #order-standard_cart:not(.tgh-cart) .products .product footer .btn{min-height:44px;margin:0}
@media (hover:hover){.tgh #order-standard_cart:not(.tgh-cart) .products .product:hover{border-color:var(--tgh-yellow);box-shadow:var(--tgh-hover-y)}}
/* Resumen del pedido (Order Summary) en las páginas heredadas */
.tgh #order-standard_cart:not(.tgh-cart) .order-summary{position:relative;margin:0 0 16px;padding:24px;background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary h2{margin:0 0 14px;padding:0;text-align:left;color:#fff;font:700 18px var(--tgh-f-title)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .loader{position:absolute;top:24px;right:24px;height:auto;padding:0;color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) .summary-container{margin:0;padding:0;min-height:0;background:none;border-radius:0;font-size:14px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .subtotal,.tgh #order-standard_cart:not(.tgh-cart) .order-summary .bordered-totals{border-color:var(--tgh-line);font-size:14px;padding-bottom:10px;margin-bottom:10px}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .summary-totals{border-color:var(--tgh-line)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .subtotal span:last-child,.tgh #order-standard_cart:not(.tgh-cart) .order-summary .bordered-totals span:last-child{color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .product-name{color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .product-group,.tgh #order-standard_cart:not(.tgh-cart) .order-summary .recurring-charges{color:var(--tgh-muted2);font-style:normal}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .total-due-today{margin:12px 0 0}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .total-due-today span{text-align:left;font-size:13px;color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .total-due-today .amt{font:800 30px/1.1 var(--tgh-f-title);color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary .btn-continue-shopping{color:var(--tgh-accent-light)}
.tgh #order-standard_cart:not(.tgh-cart) .order-summary i.fa-trash{color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) #btnGoToCart{width:100%}
/* Barra lateral del carrito y su versión plegada (móvil) */
.tgh #order-standard_cart:not(.tgh-cart) .cart-sidebar h3,.tgh #order-standard_cart:not(.tgh-cart) .sidebar-collapsed h3{color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .sidebar-collapsed{background:transparent}
/* Addons (Product Addons) */
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);overflow:hidden;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon .panel-body{color:var(--tgh-text);text-align:left;padding:16px}
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon .panel-body label{color:#fff;font-size:15px}
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon .panel-price{background:var(--tgh-bg2);color:#fff;padding:8px 16px;border-top:1px solid var(--tgh-line)}
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon .panel-add,.tgh #order-standard_cart:not(.tgh-cart) .panel-addon-selected .panel-add{background:var(--tgh-yellow);color:var(--tgh-yellow-ink);font-weight:600;padding:10px;border-radius:0}
.tgh #order-standard_cart:not(.tgh-cart) .panel-addon-selected{border-color:var(--tgh-yellow);box-shadow:var(--tgh-sel-y)}
.tgh #order-standard_cart:not(.tgh-cart) .addon-products .panel-body .form-control{margin-top:8px}
/* Dominios en el carrito */
.tgh #order-standard_cart:not(.tgh-cart) .domain-selection-options .option{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:12px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .domain-selection-options .option-selected{background:#1a1c3f;border-color:var(--tgh-yellow)}
.tgh #order-standard_cart:not(.tgh-cart) .transfer-eligible{background:#11283a;color:#D5F8E8;border-radius:10px}
.tgh #order-standard_cart:not(.tgh-cart) .transfer-not-eligible{background:var(--tgh-bg2);color:var(--tgh-text);border-radius:10px}
.tgh #order-standard_cart:not(.tgh-cart) .product-info{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:12px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .product-info .product-title{color:#fff}
.tgh #order-standard_cart:not(.tgh-cart) .apply-credit-container,.tgh #order-standard_cart:not(.tgh-cart) .cc-input-container,.tgh #order-standard_cart:not(.tgh-cart) .default-captcha{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:12px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .cc-input-container .existing-cc-grid{color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .account-select-container div.account{background:var(--tgh-bg2);border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .account-select-container div.account.active{background:#1a1c3f;border-color:var(--tgh-yellow)}
.tgh #order-standard_cart:not(.tgh-cart) .mc-promo{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:12px;color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .mc-promo .body{background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh #order-standard_cart:not(.tgh-cart) .mc-promo .header,.tgh #order-standard_cart:not(.tgh-cart) .mc-promo .expander,.tgh #order-standard_cart:not(.tgh-cart) .mc-promo .price{color:#fff!important}
.tgh #order-standard_cart:not(.tgh-cart) .btn-remove-from-cart{color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) .view-cart-items .item,.tgh #order-standard_cart:not(.tgh-cart) .view-cart-items .item:nth-child(even){background:var(--tgh-surface);color:var(--tgh-text);border-color:var(--tgh-line)}
.tgh #order-standard_cart:not(.tgh-cart) .view-cart-items .item-domain{color:var(--tgh-muted2)}
.tgh #order-standard_cart:not(.tgh-cart) .view-cart-tabs .tab-content,.tgh #order-standard_cart:not(.tgh-cart) .view-cart-promotion-code,.tgh #order-standard_cart:not(.tgh-cart) .view-cart-gateway-checkout{background:var(--tgh-surface);border-color:var(--tgh-line);color:var(--tgh-text)}
/* Buscador de dominios (domainregister / domaintransfer) — también fuera de #order-standard_cart */
.tgh .domain-checker-bg{background-image:none}
.tgh .domain-checker-container{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .domain-checker-container .input-group-box{background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:12px}
.tgh .domain-checker-container .input-group-box .form-control{background:transparent;border:0;color:#fff}
.tgh .spotlight-tlds{background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:12px}
.tgh .spotlight-tld{background:var(--tgh-surface);border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .spotlight-tld .unavailable,.tgh .spotlight-tld .invalid{background:var(--tgh-bg2);color:var(--tgh-muted2)}
.tgh .suggested-domains .domain-lookup-suggestions-loader{background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh .suggested-domains .list-group-item{color:var(--tgh-text)}
.tgh .suggested-domains .promo.sale,.tgh .spotlight-tld-sale{background:var(--tgh-yellow);color:var(--tgh-yellow-ink)}
.tgh .suggested-domains .promo.new,.tgh .spotlight-tld-new{background:var(--tgh-ok);color:#06281a}
.tgh .domain-promo-box{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .domain-promo-box h3,.tgh .domain-promo-box .font-size-18{color:#fff}
.tgh .domain-promo-box p.small,.tgh .domain-promo-box small{color:var(--tgh-muted2)}
.tgh .domain-promo-box .text-primary{color:var(--tgh-accent-light)!important}
.tgh div.domainresults div:not(.btn-group){background:var(--tgh-bg2);color:var(--tgh-text)}
.tgh .domain-checker-available{color:var(--tgh-ok)}
.tgh .domain-checker-unavailable,.tgh .domain-checker-invalid{color:#FF8DA1}

/* Colores en línea de standard_cart (configuredomains: «[has hosting]» verde / «[no hosting]» rojo) */
.tgh #order-standard_cart a[style*="#cc0000"]{color:#FFB3C1!important}
.tgh #order-standard_cart span[style*="#009900"]{color:var(--tgh-ok)!important}

/* 4. Texto suelto sobre la foto del fondo (páginas heredadas sin tarjeta) */
.tgh .primary-content>p,.tgh .primary-content>.text-center>p{color:var(--tgh-on-photo)}
.tgh #order-standard_cart:not(.tgh-cart) .cart-body{color:var(--tgh-on-photo)}
.tgh #order-standard_cart:not(.tgh-cart) .cart-body>div>div>p,.tgh #order-standard_cart:not(.tgh-cart) p.margin-bottom,.tgh .primary-content>p{color:#EEF0FA;text-shadow:0 1px 3px rgba(5,6,20,.85)}
.tgh .table-list,.tgh table.table-list{border-color:var(--tgh-line)!important}
.tgh .invite-box,.tgh .select-account,.tgh .select-account a{border-color:var(--tgh-line)}

/* 5. Cotización (viewquote.tpl: página suelta como la factura; el tema la copia solo para cargar custom.css y esta hoja) */
body.tgh-tpl-viewquote{padding:24px 0}
.tgh .invoice-container{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);color:var(--tgh-text)}
.tgh .invoice-container h2,.tgh .invoice-container h3{color:#fff}
.tgh .invoice-container td.total-row{background:var(--tgh-bg2)!important;color:#fff}
.tgh .invoice-container .table td,.tgh .invoice-container .table th{background:transparent}
.tgh .invoice-container address,.tgh .invoice-container .small-text{color:var(--tgh-text)}
.tgh .invoice-status .unpaid,.tgh .invoice-status .cancelled,.tgh .invoice-status .collections{color:#FF8DA1}
.tgh .invoice-status .paid{color:var(--tgh-ok)}
.tgh .invoice-status .refunded,.tgh .invoice-status .draft{color:#9AA3FF}
body.tgh-tpl-viewquote>p a{color:var(--tgh-accent-light)}
@media print{
  body.tgh-tpl-viewquote{background:#fff;padding:0}
  .tgh .invoice-container{background:#fff;border-color:#ccc}
  .tgh .invoice-container *{color:#111!important;background:transparent!important}
}

/* 6. Editor Markdown de WHMCS (tickets: responder y nuevo) y su vista previa.
   twenty-one fuerza la barra en blanco con `.md-editor>.btn-toolbar{background-color:#fff!important}` y la pantalla completa
   con `background:#fff!important`: aquí se anulan con más especificidad. Botones: contorno oscuro, hover y activo amarillos. */
body.tgh .md-editor>.md-header.btn-toolbar,body.tgh .md-editor>.md-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;background-color:var(--tgh-surface)!important;border-bottom:1px solid var(--tgh-line);color:var(--tgh-muted2)}
body.tgh .md-editor .md-header .btn-group{margin:0;display:inline-flex}
body.tgh .md-editor .md-header .btn,body.tgh .md-editor .md-header .btn-primary{min-height:36px;min-width:38px;padding:0 10px;background:transparent;border:1px solid var(--tgh-line);color:#D6D9EE!important;font-size:14px;font-weight:600;border-radius:0;box-shadow:none}
body.tgh .md-editor .md-header .btn-group>.btn:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
body.tgh .md-editor .md-header .btn-group>.btn:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}
body.tgh .md-editor .md-header .btn-group>.btn+.btn{margin-left:-1px}
body.tgh .md-editor .md-header .btn .fa,body.tgh .md-editor .md-header .btn .fas,body.tgh .md-editor .md-header .btn .far,body.tgh .md-editor .md-header .btn .glyphicon{color:inherit}
body.tgh .md-editor .md-header .btn-primary{color:var(--tgh-yellow)!important}
body.tgh .md-editor .md-header .btn:hover,body.tgh .md-editor .md-header .btn:focus-visible{position:relative;z-index:1;background:var(--tgh-bg2);border-color:var(--tgh-yellow);color:#fff!important}
body.tgh .md-editor .md-header .btn.active,body.tgh .md-editor .md-header .btn:active{position:relative;z-index:1;background:var(--tgh-yellow)!important;border-color:var(--tgh-yellow);color:var(--tgh-yellow-ink)!important}
body.tgh .md-editor .md-header .btn:disabled,body.tgh .md-editor .md-header .btn.disabled{opacity:.45}
body.tgh .md-editor .md-header .md-controls{order:99;margin-left:auto;float:none}
body.tgh .md-editor .md-control,body.tgh .md-editor .md-control-fullscreen{display:inline-flex;color:var(--tgh-muted2);padding:6px 8px;border-radius:8px;cursor:pointer}
body.tgh .md-editor .md-control:hover{color:var(--tgh-yellow)}
body.tgh .md-editor .md-footer{background:var(--tgh-surface);color:var(--tgh-muted2);border-top:1px solid var(--tgh-line);font-size:13px;padding:6px 12px}
body.tgh .md-editor .md-footer *{color:inherit}
body.tgh .md-editor>textarea.md-input::placeholder{color:#6a6f96}
/* Vista previa y mensajes renderizados (Markdown) */
.tgh .md-preview,.tgh .markdown-content{color:var(--tgh-text);overflow-wrap:anywhere}
.tgh .md-preview h1,.tgh .md-preview h2,.tgh .md-preview h3,.tgh .md-preview h4,.tgh .md-preview h5,.tgh .md-preview h6,.tgh .markdown-content h1,.tgh .markdown-content h2,.tgh .markdown-content h3,.tgh .markdown-content h4,.tgh .markdown-content h5,.tgh .markdown-content h6{color:#fff}
.tgh .md-preview a,.tgh .markdown-content a{color:var(--tgh-accent-light);text-decoration:underline}
.tgh .md-preview pre,.tgh .markdown-content pre{background:var(--tgh-bg);color:#E6E8F5;border:1px solid var(--tgh-line);border-radius:10px}
.tgh .md-preview code,.tgh .markdown-content code{color:#fff}
.tgh .md-preview pre code,.tgh .markdown-content pre code,.tgh pre code{background:none;border:0;padding:0;font-size:13px}
.tgh .md-preview h1,.tgh .markdown-content h1{font-size:1.6em}
.tgh .md-preview h2,.tgh .markdown-content h2{font-size:1.4em}
.tgh .md-preview h3,.tgh .markdown-content h3{font-size:1.2em}
.tgh .md-preview h4,.tgh .md-preview h5,.tgh .md-preview h6,.tgh .markdown-content h4,.tgh .markdown-content h5,.tgh .markdown-content h6{font-size:1.05em}
.tgh .md-preview blockquote,.tgh .markdown-content blockquote{border-left:4px solid var(--tgh-yellow);color:var(--tgh-on-photo);background:rgba(250,191,38,.05);border-radius:0 8px 8px 0}
.tgh .md-preview table,.tgh .markdown-content table{background:transparent;border-color:var(--tgh-line)}
.tgh .md-preview table>thead>tr>th,.tgh .markdown-content table>thead>tr>th{background:var(--tgh-bg2);color:#fff;border-color:var(--tgh-line)}
.tgh .md-preview table>tbody>tr>td,.tgh .markdown-content table>tbody>tr>td{border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh .md-preview hr,.tgh .markdown-content hr{border-color:var(--tgh-line)}
/* Pantalla completa del editor: oscura (twenty-one la pone blanca con !important), y por ENCIMA de la cabecera fija:
   `.tgh-page{isolation:isolate}` (custom.css) la encerraba debajo; se libera solo mientras está a pantalla completa (mismo arreglo que t2 hizo para los modales) */
.tgh .tgh-page:has(.md-fullscreen-mode){isolation:auto}
body.tgh:has(.md-fullscreen-mode){overflow:hidden}
body.tgh .md-editor.md-fullscreen-mode{background:var(--tgh-bg)!important;border:0!important}
body.tgh .md-editor.md-fullscreen-mode>.md-header,body.tgh .md-editor.md-fullscreen-mode>.md-header.btn-toolbar{background:transparent!important;border:0;justify-content:center;left:0;right:0;width:auto}
body.tgh .md-editor.md-fullscreen-mode>.md-header .md-controls{display:none}
body.tgh .md-editor.md-fullscreen-mode>textarea.md-input,body.tgh .md-editor.md-fullscreen-mode>.md-preview,body.tgh .md-editor.md-fullscreen-mode .md-input:focus,body.tgh .md-editor.md-fullscreen-mode .md-input:hover{background:var(--tgh-bg2)!important;color:var(--tgh-text)!important;border:1px solid var(--tgh-line)!important;border-radius:12px}
body.tgh .md-editor.md-fullscreen-mode .md-fullscreen-controls a{color:var(--tgh-muted2)}
body.tgh .md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover{color:var(--tgh-yellow)}
/* Adjuntos (Choose file / Browse + Add More): misma altura y piel que los campos del tema */
.tgh .attachment-group{flex-wrap:nowrap;align-items:stretch}
.tgh .attachment-group .custom-file,.tgh .attachment-group .custom-file-input,.tgh .custom-file-label{height:48px}
.tgh .custom-file-label{display:flex;align-items:center;padding:0 110px 0 14px;background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:10px;color:var(--tgh-text);font-size:15px;cursor:pointer}
.tgh .custom-file-label::after{height:46px;display:flex;align-items:center;padding:0 16px;background:var(--tgh-raised);color:#fff;border-left:1px solid var(--tgh-line);border-radius:0 9px 9px 0;font-weight:600}
.tgh .attachment-group>.custom-file:not(:last-child) .custom-file-label{border-top-right-radius:0;border-bottom-right-radius:0}
.tgh .attachment-group>.custom-file:not(:last-child) .custom-file-label::after{border-radius:0}
.tgh .attachment-group .input-group-append .btn{min-height:48px;border-radius:0 10px 10px 0;margin-left:-1px;white-space:nowrap}
.tgh .custom-file-input:focus~.custom-file-label{border-color:var(--tgh-accent);box-shadow:0 0 0 3px rgba(110,123,255,.25)}
@media (hover:hover){.tgh .custom-file:hover .custom-file-label{border-color:var(--tgh-yellow)}.tgh .custom-file:hover .custom-file-label::after{color:var(--tgh-yellow)}}
@media (max-width:420px){.tgh .attachment-group .input-group-append .btn{padding:0 12px}.tgh .custom-file-label{padding-right:96px}}

/* 7. Pantallas altas/anchas (2560–3300): en páginas cortas quedaba una franja vacía DEBAJO del pie.
   El pie se queda abajo estirando <main>; solo en páginas con la estructura del tema (las sueltas como la factura no). */
body.tgh:has(>main#main-body){display:flex;flex-direction:column;min-height:100vh}
body.tgh:has(>main#main-body)>main#main-body{flex:1 0 auto}
body.tgh:has(>main#main-body)>*{flex-shrink:0}

/* 8. Móvil (390): textos largos que no caben (títulos, botones de grupo, tablas de twenty-one) */
.tgh .primary-content h1,.tgh .primary-content h2,.tgh .primary-content h3,.tgh #order-standard_cart:not(.tgh-cart) h1,.tgh #order-standard_cart:not(.tgh-cart) h2{overflow-wrap:break-word}
.tgh .primary-content .btn-group:not(.btn-group-toggle):not(.bootstrap-select){flex-wrap:wrap;max-width:100%}
.tgh .action-icon-btns a{overflow-wrap:break-word}

/* 9. Componentes (medidos inyectándolos en páginas heredadas del banco) */
/* controles nativos (icono del calendario, desplegable de <select>, casillas sin marcar, barras de scroll) en oscuro */
@media screen{body.tgh:has(>main#main-body){color-scheme:dark}}
/* insignia roja: blanco sobre #FF5C7A daba 2.97:1 → tinta oscura (como las verdes y amarillas) */
.tgh .badge-danger{color:#2a0612}
/* barra de progreso: blanco sobre el índigo de marca daba 3.5:1 */
.tgh .progress-bar{background-color:#5664F0;color:#fff}
.tgh .popover-header{font:700 15px/1.3 var(--tgh-f-title);padding:10px 14px}
.tgh .popover-body{color:var(--tgh-text);padding:10px 14px}
.tgh .tooltip-inner{background:#05061a;color:#fff;border:1px solid var(--tgh-line);border-radius:8px;padding:6px 10px}
/* avisos emergentes de WHMCS (jQuery.growl: «guardado», «error al comunicar con el servidor»…) */
#growls{position:fixed;z-index:50000;top:84px;right:16px;max-width:calc(100vw - 32px)}
#growls .growl{position:relative;width:320px;max-width:100%;margin:0 0 10px;padding:12px 36px 12px 16px;background:var(--tgh-surface,#151938);color:var(--tgh-text,#B6BAD8);border:1px solid var(--tgh-line,#262a52);border-left:4px solid var(--tgh-accent,#6E7BFF);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);font-size:14px;line-height:1.45;opacity:1}
#growls .growl-notice{border-left-color:var(--tgh-ok,#3DDC97)}
#growls .growl-warning{border-left-color:var(--tgh-yellow,#FABF26)}
#growls .growl-error{border-left-color:var(--tgh-bad,#FF5C7A)}
#growls .growl-title{color:#fff;font-weight:700;margin-bottom:2px}
#growls .growl-message{color:inherit}
#growls .growl-close{position:absolute;top:8px;right:12px;cursor:pointer;color:var(--tgh-muted2,#9A9FC4);font-size:18px;line-height:1}
#growls .growl-close:hover{color:#fff}

/* 10. Ventana «View Message» del historial de correos (viewemail.tpl: ventana suelta, <body id="popup-backdrop"> SIN la clase .tgh) */
body#popup-backdrop{margin:0;padding:16px;min-height:100vh;background:var(--tgh-bg);color:var(--tgh-text);font:400 15px/1.6 var(--tgh-f-text);color-scheme:dark}
#popup-backdrop .card{background:var(--tgh-surface);border:1px solid var(--tgh-line);border-radius:var(--tgh-r);overflow:hidden;color:var(--tgh-text)}
#popup-backdrop .card-header,#popup-backdrop .card-footer{background:transparent;border-color:var(--tgh-line);padding:14px 18px}
#popup-backdrop .card-header h2{margin:0 0 4px;color:#fff;font:700 20px/1.3 var(--tgh-f-title);overflow-wrap:anywhere}
#popup-backdrop .card-header h2 i{color:var(--tgh-yellow)}
#popup-backdrop .card-header .popup-header-padding:not(h2){color:var(--tgh-muted2);font-size:14px}
#popup-backdrop .card-body{padding:16px}
#popup-backdrop .card-body iframe{display:block;background:#fff;border-radius:10px}
#popup-backdrop .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:10px;font-weight:600;font-size:15px}
#popup-backdrop .btn-primary{background:var(--tgh-yellow);border:1px solid var(--tgh-yellow);color:var(--tgh-yellow-ink)}
#popup-backdrop .btn-primary:hover,#popup-backdrop .btn-primary:focus{background:#FFD24D;border-color:#FFD24D;color:var(--tgh-yellow-ink)}
/* 3D Secure: el marco del banco con el borde del tema, no el gris por defecto */
.tgh iframe.submit-3d{width:100%;max-width:100%;border:1px solid var(--tgh-line);border-radius:12px}
/* Redirección a la pasarela: la barra animada a todo el ancho en móvil */
@media (max-width:600px){.tgh-tpl-forwardpage .progress.w-25{width:60%!important}}

@media (max-width:600px){
  .tgh #order-standard_cart .domain-renewals .domain-renewal,.tgh #order-standard_cart .service-renewals .service-renewal,.tgh #order-standard_cart .domain-renewals .domain-renewal:nth-child(even),.tgh #order-standard_cart .service-renewals .service-renewal:nth-child(even){padding:16px}
  .tgh #order-standard_cart:not(.tgh-cart) .order-summary{padding:18px}
  /* tablas anchas de twenty-one sin envoltorio: scroll dentro de la tabla, no de la página */
  .tgh table.table-solid-bottom-border-light-gray,.tgh .ticketfeedbackstaffcont table.table{display:block;max-width:100%;overflow-x:auto;position:relative}
  .tgh .ticketfeedbackstaffcont table.table td{padding:8px 4px;min-width:28px}
  .tgh .ticketfeedbackstaffcont .form-check-input{position:static;margin:0}
  .tgh .ticketfeedbackstaffcont{padding:14px}
  /* cotización suelta: la caja ocupaba el 100 % + margen */
  body.tgh-tpl-viewquote{padding:12px 0}
  body.tgh-tpl-viewquote .invoice-container{width:auto;max-width:none;margin:0 12px;padding:20px 16px}
}

/* ===== Stripe Elements en la factura (invoice-payment, #frmPayment) y en Payment Methods (.frm-credit-card-input) — 9-nov-2026
   El módulo Stripe de WHMCS 8.13 mete #stripeElements > .form-group.row.cc-billing-address con label.col-sm-4 + div.col-sm-7
   (número) / div.col-sm-2 (fecha y CVC) y dentro div.form-control (#stripeCreditCard/#stripeExpiryDate/#stripeCvc) con el iframe.
   Aquí: la caja centra el iframe en vertical (flex), fecha y CVC con ancho para «MM / AA», etiqueta centrada con la caja,
   foco y error con las clases que pone Stripe (el :focus no sale del iframe). El color del texto lo da tgh-stripe.js. */
.tgh #stripeElements .form-control,.tgh #elementCardNumber,.tgh #elementCardExpiry,.tgh #elementCardCvc{display:flex;align-items:center;height:auto;min-height:52px;padding:0 16px;background-color:var(--tgh-bg);cursor:text;transition:border-color .15s,box-shadow .15s}
.tgh #stripeElements .form-control>*,.tgh #elementCardNumber>*,.tgh #elementCardExpiry>*,.tgh #elementCardCvc>*{flex:1 1 auto;width:100%;min-width:0}
.tgh .StripeElement--focus{border-color:var(--tgh-accent);box-shadow:0 0 0 3px rgba(110,123,255,.25)}
.tgh .StripeElement--invalid{border-color:var(--tgh-bad,#FF5C7A);box-shadow:0 0 0 3px rgba(255,92,122,.16)}
.tgh .StripeElement--webkit-autofill{background-color:var(--tgh-bg)!important}
.tgh #stripeElements .cc-billing-address{align-items:center;margin-bottom:16px}
.tgh #stripeElements .cc-billing-address>.control-label{margin:0;padding-top:0;padding-bottom:0;line-height:20px}
.tgh #stripeElements .cc-billing-address>.col-sm-2{flex:0 0 190px;max-width:190px}
.tgh #stripeElements .cc-billing-address>.col-sm-4:empty,.tgh #stripeCardType:empty{display:none}
.tgh #stripeCvcWhere a{font-size:14px}
.tgh #frmPayment .form-control::placeholder,.tgh .frm-credit-card-input .form-control::placeholder{color:var(--tgh-muted2)}
.tgh #stripeElements>.row:not(.cc-billing-address){margin:0 0 16px}
@media (min-width:768px){
  .tgh-tpl-invoice-payment #stripeElements .cc-billing-address>.control-label{text-align:right}
}
@media (max-width:575px){
  .tgh #stripeElements .cc-billing-address>.control-label{margin-bottom:8px}
  .tgh #stripeElements .cc-billing-address>.col-sm-2{flex:0 0 100%;max-width:100%}
  .tgh #stripeCvcWhere{margin-top:8px}
}
/* Pago de factura en móvil: twenty-one pone `.cc-payment-form .control-label{text-align:right}` a cualquier ancho y las
   demás etiquetas (text-md-right) solo desde 768px: debajo de eso, todas a la izquierda, encima de su campo. */
@media (max-width:767px){
  .tgh .cc-payment-form .control-label,.tgh #stripeElements .cc-billing-address>.control-label{text-align:left}
}