.gb-form-container { max-width: 1200px; margin: 15px auto; padding: 0 20px; } .gb-info-accordion { margin-bottom: 20px; border-radius: 12px; border: 1.5px solid #e5e7eb; background: #fff; overflow: hidden; } .gb-info-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.2s; } .gb-info-accordion-toggle:hover { background: #f9fafb; } .gb-info-accordion-title { font-size: 15px; font-weight: 600; color: #374151; } .gb-info-accordion-arrow { color: #9ca3af; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 12px; } .gb-info-accordion-toggle[aria-expanded="true"] .gb-info-accordion-arrow { transform: rotate(180deg); } .gb-info-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .gb-info-accordion-content.open { max-height: 600px; } .gb-info-accordion-body { padding: 0 20px 18px 20px; font-size: 14px; line-height: 1.7; color: #6b7280; } .gb-info-accordion-body p { margin: 0 0 8px 0; } .gb-info-accordion-body p:last-child { margin-bottom: 0; } .gb-form { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .gb-form-section { padding: 30px; border-bottom: 1px solid #ecf0f1; } .gb-form-section:last-child { border-bottom: none; } .gb-section-title { font-size: 24px; color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .gb-section-icon { font-size: 28px; } .gb-section-desc { color: #7f8c8d; margin-bottom: 20px; } .gb-bulk-item-row { display: grid; grid-template-columns: 2fr 2fr 1fr 1.5fr 80px 50px; gap: 15px; align-items: end; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; } .gb-form-group { display: flex; flex-direction: column; } .gb-form-group label { font-weight: 600; color: #2c3e50; margin-bottom: 8px; font-size: 14px; } .gb-form-group select, .gb-form-group input[type="text"], .gb-form-group input[type="email"], .gb-form-group input[type="tel"], .gb-form-group input[type="number"], .gb-form-group input[type="url"], .gb-form-group textarea { padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 15px; transition: all 0.3s ease; } .gb-form-group select:focus, .gb-form-group input:focus, .gb-form-group textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .gb-form-group select:disabled { background: #ecf0f1; cursor: not-allowed; } .gb-price-display { padding: 12px; background: #ecf0f1; border-radius: 6px; font-weight: 600; color: #27ae60; text-align: right; } .gb-card-type-image { width: 70px; height: 98px; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #f8f9fa; border-radius: 6px; border: 2px solid #e0e0e0; } .gb-btn-remove-bulk { width: 40px; height: 40px; border: none; background: #e74c3c; color: white; border-radius: 6px; font-size: 24px; cursor: pointer; transition: all 0.3s ease; } .gb-btn-remove-bulk:hover { background: #c0392b; transform: scale(1.1); } .gb-search-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); margin-bottom: 30px; } .gb-search-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .gb-search-icon { font-size: 32px; animation: gb-pulse 2s infinite; } @keyframes gb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .gb-search-header h4 { color: white; font-size: 24px; margin: 0; font-weight: 600; } .gb-search-inputs-wrapper { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 15px; } .gb-search-main-input { padding: 15px 20px; border: none; border-radius: 12px; font-size: 16px; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; } .gb-search-main-input:focus { outline: none; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .gb-search-button { padding: 15px 30px; background: #27ae60; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; white-space: nowrap; } .gb-search-button:hover { background: #229954; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4); } .gb-search-btn-icon { font-size: 20px; } .gb-search-hint { color: rgba(255,255,255,0.9); font-size: 14px; margin: 0; padding: 0 5px; } .gb-search-loading { text-align: center; padding: 60px 20px; background: #f8f9fa; border-radius: 16px; margin: 20px 0; } .gb-loading-spinner { width: 60px; height: 60px; border: 5px solid #ecf0f1; border-top-color: #3498db; border-radius: 50%; animation: gb-spin 1s linear infinite; margin: 0 auto 20px; } @keyframes gb-spin { to { transform: rotate(360deg); } } .gb-loading-text { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 10px; } .gb-loading-subtext { font-size: 14px; color: #7f8c8d; animation: gb-fade 1.5s infinite; } @keyframes gb-fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .gb-search-results { margin: 30px 0; } .gb-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #ecf0f1; } .gb-results-title { font-size: 20px; color: #2c3e50; margin: 0; } .gb-clear-results-btn { padding: 8px 20px; background: #95a5a6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .gb-clear-results-btn:hover { background: #7f8c8d; } .gb-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .gb-result-card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; border: 3px solid transparent; } .gb-result-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); border-color: #3498db; } .gb-result-card img { width: 100%; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 8px; margin-bottom: 12px; background: #f8f9fa; } .gb-result-info { text-align: center; } .gb-result-info h5 { font-size: 15px; color: #2c3e50; margin: 0 0 8px 0; font-weight: 600; min-height: 40px; display: flex; align-items: center; justify-content: center; } .gb-result-info p { font-size: 13px; color: #7f8c8d; margin: 4px 0; } .gb-result-price { font-weight: 700; color: #27ae60; font-size: 18px !important; margin: 12px 0 !important; } .gb-btn-select-card { width: 100%; padding: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 12px; } .gb-btn-select-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } .gb-search-error { text-align: center; padding: 40px 20px; background: #fee; border-radius: 16px; border-left: 5px solid #e74c3c; margin: 20px 0; } .gb-error-icon { font-size: 48px; margin-bottom: 15px; } .gb-error-message { font-size: 16px; color: #c0392b; margin-bottom: 20px; } .gb-retry-btn { padding: 12px 30px; background: #e74c3c; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .gb-retry-btn:hover { background: #c0392b; } .gb-added-cards { margin-top: 40px; padding: 25px; background: #f8f9fa; border-radius: 16px; border: 2px dashed #bdc3c7; } .gb-added-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .gb-added-header h4 { font-size: 20px; color: #2c3e50; margin: 0; } .gb-added-count { background: #3498db; color: white; padding: 6px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; } display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; } .gb-added-card-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .gb-added-card-item:hover .gb-btn-remove-added-hover { opacity: 1; pointer-events: auto; } .gb-added-card-image-wrapper { text-align: center; margin-bottom: 15px; } .gb-added-card-image { width: 100%; max-width: 180px; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background: #f8f9fa; } .gb-added-card-info { text-align: center; } .gb-added-card-price-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 12px; margin-top: 15px; text-align: center; } .gb-added-card-price-label { font-size: 12px; opacity: 0.9; margin-bottom: 5px; } .gb-added-card-price-value { font-size: 24px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .gb-added-card-image { width: 120px; height: auto; border-radius: 8px; } .gb-added-card-info h5 { font-size: 16px; color: #2c3e50; margin: 0 0 8px 0; } .gb-added-card-info p { font-size: 13px; color: #7f8c8d; margin: 4px 0; } .gb-added-card-price { font-size: 20px; font-weight: 700; color: #27ae60; } .gb-btn-remove-added { padding: 10px 20px; background: #e74c3c; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .gb-btn-remove-added:hover { background: #c0392b; } @media (max-width: 768px) { .gb-search-inputs-wrapper { grid-template-columns: 1fr; } .gb-results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .gb-added-card-item { grid-template-columns: 80px 1fr; gap: 12px; } .gb-added-card-image { width: 80px; } .gb-btn-remove-added { grid-column: 1 / -1; width: 100%; } } .gb-specific-card-preview { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; padding: 20px; background: white; border-radius: 8px; align-items: center; } .gb-card-image-wrapper { text-align: center; } .gb-card-image { width: 180px; height: 251px; object-fit: contain; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: #f8f9fa; } .gb-card-name { font-size: 18px; color: #2c3e50; margin-bottom: 15px; } .gb-card-prices { display: flex; flex-direction: column; gap: 8px; } .gb-price-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #ecf0f1; } .gb-buylist-row { border-bottom: none; padding-top: 15px; margin-top: 8px; border-top: 2px solid #27ae60; } .gb-price-label { color: #7f8c8d; font-size: 14px; } .gb-price-value { font-weight: 600; color: #2c3e50; font-size: 16px; } .gb-buylist-price { color: #27ae60; font-size: 20px; } .gb-btn-remove-specific { padding: 10px 20px; background: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .gb-btn-remove-specific:hover { background: #c0392b; } .gb-specific-loading { display: flex; align-items: center; gap: 15px; padding: 20px; background: white; border-radius: 8px; } .gb-spinner { width: 30px; height: 30px; border: 3px solid #ecf0f1; border-top-color: #3498db; border-radius: 50%; animation: gb-spin 0.8s linear infinite; } @keyframes gb-spin { to { transform: rotate(360deg); } } .gb-specific-error { padding: 15px; background: #fee; border-left: 4px solid #e74c3c; color: #c0392b; border-radius: 6px; } .gb-btn { padding: 12px 24px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .gb-btn-primary { background: #27ae60; color: white; } .gb-btn-primary:hover { background: #229954; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3); } .gb-btn-secondary { background: #3498db; color: white; } .gb-btn-secondary:hover { background: #2980b9; } .gb-payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .gb-radio-option { padding: 20px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .gb-radio-option:hover { border-color: #3498db; background: #f8f9fa; } .gb-radio-option input[type="radio"] { display: none; } .gb-radio-option input[type="radio"]:checked + .gb-radio-content { position: relative; } .gb-radio-option input[type="radio"]:checked ~ .gb-radio-content::before { content: '✓'; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; background: #27ae60; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .gb-radio-content strong { display: block; color: #2c3e50; margin-bottom: 5px; } .gb-radio-content span { color: #7f8c8d; font-size: 14px; } .gb-price-summary { background: #f8f9fa; } .gb-summary-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e0e0e0; } .gb-summary-row strong { font-size: 18px; } .gb-subtotal { padding-top: 20px; margin-top: 10px; border-top: 2px solid #bdc3c7; } .gb-bonus { color: #27ae60; } .gb-bonus-text { color: #27ae60 !important; } .gb-total { padding: 20px 0; margin-top: 10px; border-top: 3px solid #2c3e50; border-bottom: none; font-size: 20px; } .gb-total strong { font-size: 28px; color: #27ae60; } .gb-minimum-notice { text-align: center; padding: 15px; background: #fff3cd; border-radius: 6px; color: #856404; margin-top: 20px; font-weight: 600; } .gb-minimum-notice.gb-minimum-not-met { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; } .gb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .gb-form-group.gb-half { margin-bottom: 0; } .required { color: #e74c3c; } .gb-help-text { font-size: 13px; color: #7f8c8d; margin-top: 5px; } .gb-terms-box { padding: 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #3498db; } .gb-checkbox-label { display: flex; align-items: start; gap: 12px; cursor: pointer; } .gb-checkbox-label input[type="checkbox"] { margin-top: 4px; width: 20px; height: 20px; cursor: pointer; } .gb-message { padding: 30px; border-radius: 8px; text-align: center; margin: 30px 0; } .gb-message-success { background: #d4edda; border: 2px solid #28a745; color: #155724; } .gb-message-error { background: #f8d7da; border: 2px solid #dc3545; color: #721c24; } .gb-message-icon { font-size: 48px; margin-bottom: 15px; } .gb-message h3 { font-size: 24px; margin-bottom: 10px; } .gb-submission-number { font-weight: 600; font-size: 18px; } .gb-form-actions { text-align: center; } #gb-submit-btn { min-width: 250px; padding: 16px 32px; font-size: 18px; } .gb-btn-spinner { display: inline-flex; align-items: center; gap: 10px; } @media (max-width: 768px) { .gb-bulk-item-row { grid-template-columns: 1fr; } .gb-payment-options { grid-template-columns: 1fr; } .gb-form-row { grid-template-columns: 1fr; } .gb-specific-card-preview { grid-template-columns: 1fr; } } .gb-added-total { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); color: white; padding: 20px; border-radius: 16px; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); } .gb-added-total-label { font-size: 14px; opacity: 0.9; margin-bottom: 8px; } .gb-added-total-value { font-size: 32px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .gb-added-total-count { font-size: 13px; opacity: 0.85; margin-top: 8px; } .gb-btn-remove-added-hover { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: #e74c3c; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); z-index: 10; } .gb-btn-remove-added-hover:hover { background: #c0392b; transform: scale(1.1); } .gb-pokeball-loading { width: 80px; height: 80px; margin: 0 auto 20px; animation: gb-pokeball-spin 1.5s linear infinite; } @keyframes gb-pokeball-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gb-recent-searches { margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .gb-recent-label { font-size: 13px; color: rgba(255,255,255,0.8); } .gb-recent-chip { background: rgba(255,255,255,0.2); color: white; padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.3); } .gb-recent-chip:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); } .gb-filter-bar { background: white; padding: 15px 20px; border-radius: 12px; margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .gb-filter-group { display: flex; align-items: center; gap: 10px; } .gb-filter-label { font-size: 14px; font-weight: 600; color: #2c3e50; } .gb-filter-select { padding: 8px 16px; border: 2px solid #e0e0e0; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; background: white; } .gb-filter-select:hover { border-color: #667eea; } .gb-filter-select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @media (max-width: 1024px) { .gb-added-cards-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .gb-added-cards-list { grid-template-columns: 1fr; } .gb-added-total-value { font-size: 24px; } } .gb-result-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .gb-result-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); } .gb-result-card:hover img { transform: scale(1.08); } .gb-result-card img { transition: transform 0.4s ease; } .gb-pokeball-loading { width: 80px; height: 80px; margin: 0 auto 20px; animation: gb-pokeball-spin 1.5s linear infinite; } @keyframes gb-pokeball-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gb-recent-separator { color: rgba(255,255,255,0.5); margin: 0 8px; font-size: 14px; } .gb-result-price-tl { font-size: 24px !important; font-weight: 700 !important; color: #27ae60 !important; margin: 10px 0 5px 0 !important; } .gb-result-price-label { font-size: 12px !important; color: #7f8c8d !important; margin: 0 0 10px 0 !important; } .gb-two-column-layout { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; } .gb-main-area { min-width: 0; } .gb-sidebar-area { position: sticky; top: 20px; align-self: start; } .gb-sidebar-card { background: white; border-radius: 16px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .gb-sidebar-heading { font-size: 18px; font-weight: 700; margin: 0 0 20px 0; color: #2c3e50; } .gb-sidebar-price-card { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); color: white; } .gb-sidebar-price-card .gb-sidebar-heading { color: white; } .gb-sidebar-price-line { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.2); } .gb-sidebar-price-line:last-child { border-bottom: none; } .gb-sidebar-total-line { padding-top: 15px; margin-top: 10px; border-top: 2px solid rgba(255,255,255,0.3) !important; } .gb-sidebar-total-line strong { font-size: 24px !important; } .gb-added-cards-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } @media (max-width: 1200px) { .gb-added-cards-list { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 1024px) { .gb-two-column-layout { grid-template-columns: 1fr; } .gb-sidebar-area { position: static; } } @media (max-width: 768px) { .gb-added-cards-list { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .gb-added-cards-list { grid-template-columns: 1fr !important; } } .gb-form-container, .gb-form-container * { font-family: inherit !important; } .gb-checkbox-label span { white-space: pre-line; line-height: 1.8; } .gb-checkbox-label span ol, .gb-checkbox-label span ul { margin: 10px 0 10px 25px; padding: 0; } .gb-checkbox-label span li { margin-bottom: 8px; } .gb-terms-content-box { background: #f8f9fa; border: 2px solid #e0e0e0; border-radius: 12px; padding: 25px; margin-bottom: 25px; max-height: 300px; overflow-y: auto; line-height: 1.8; font-size: 14px; color: #2c3e50; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .gb-terms-content-box::-webkit-scrollbar { width: 8px; } .gb-terms-content-box::-webkit-scrollbar-track { background: #ecf0f1; border-radius: 4px; } .gb-terms-content-box::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; } .gb-terms-content-box::-webkit-scrollbar-thumb:hover { background: #95a5a6; } .gb-terms-checkbox-wrapper { background: white; border: 2px solid #27ae60; border-radius: 12px; padding: 20px; transition: all 0.3s ease; } .gb-terms-checkbox-wrapper:hover { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.15); transform: translateY(-2px); } .gb-terms-checkbox-label { display: flex; align-items: center; gap: 15px; cursor: pointer; margin: 0; } .gb-terms-checkbox-label input[type="checkbox"] { width: 24px; height: 24px; cursor: pointer; flex-shrink: 0; accent-color: #27ae60; } .gb-checkbox-text { font-size: 15px; font-weight: 600; color: #2c3e50; flex: 1; } .gb-required-star { color: #e74c3c; font-size: 18px; font-weight: 700; } .gb-terms-checkbox-label input[type="checkbox"]:checked + .gb-checkbox-text { color: #27ae60; } .gb-terms-checkbox-label input[type="checkbox"]:checked ~ .gb-required-star { display: none; } @media (max-width: 768px) { .gb-terms-content-box { padding: 18px; font-size: 13px; max-height: 250px; } .gb-checkbox-text { font-size: 14px; } } /* ==================================== BULK WIZARD - STEP BY STEP SYSTEM ==================================== */ .gb-bulk-wizard { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); max-width: 1000px; margin: 0 auto; } .gb-wizard-progress { display: flex; justify-content: space-between; margin-bottom: 50px; position: relative; } .gb-wizard-progress::before { content: ''; position: absolute; top: 25px; left: 15%; right: 15%; height: 3px; background: #e0e0e0; z-index: 0; } .gb-wizard-step { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; flex: 1; } .gb-step-number { width: 50px; height: 50px; border-radius: 50%; background: #e0e0e0; color: #7f8c8d; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: all 0.3s ease; } .gb-wizard-step.active .gb-step-number { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transform: scale(1.1); } .gb-wizard-step.completed .gb-step-number { background: #27ae60; color: white; } .gb-step-label { font-size: 13px; font-weight: 600; color: #7f8c8d; text-align: center; } .gb-wizard-step.active .gb-step-label { color: #667eea; } .gb-wizard-content { display: none; animation: fadeIn 0.3s ease; } .gb-wizard-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .gb-wizard-heading { font-size: 28px; color: #2c3e50; text-align: center; margin-bottom: 15px; } .gb-wizard-subtitle { text-align: center; color: #7f8c8d; margin-bottom: 30px; } .gb-series-count-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; max-width: 600px; margin: 0 auto; } .gb-count-option { background: #f8f9fa; border: 3px solid #e0e0e0; border-radius: 20px; padding: 40px 30px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .gb-count-option:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-color: #667eea; } .gb-count-option.selected { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: #667eea; color: white; } .gb-count-icon { font-size: 60px; margin-bottom: 20px; } .gb-count-option h4 { font-size: 22px; margin: 0 0 10px 0; color: inherit; } .gb-count-option p { font-size: 14px; margin: 0; opacity: 0.8; } .gb-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; margin-bottom: 30px; } .gb-series-card { background: white; border: 3px solid #e0e0e0; border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; } .gb-series-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-color: #667eea; } .gb-series-card.selected { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border-color: #667eea; border-width: 4px; } .gb-series-checkbox { position: absolute; top: 10px; right: 10px; } .gb-series-checkbox input[type="checkbox"] { width: 24px; height: 24px; cursor: pointer; accent-color: #667eea; } .gb-series-logo { width: 100%; height: 100px; object-fit: contain; margin-bottom: 15px; border-radius: 8px; } .gb-series-logo-placeholder { width: 100%; height: 100px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 48px; margin-bottom: 15px; } .gb-series-name { font-size: 15px; font-weight: 600; color: #2c3e50; margin: 0; } .gb-series-card.selected .gb-series-name { color: #667eea; } .gb-bulk-series-group { background: #f8f9fa; border-radius: 16px; padding: 25px; margin-bottom: 20px; } .gb-bulk-series-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0; } .gb-bulk-series-logo-small { width: 90px; height: 50px; object-fit: contain; border-radius: 8px; } .gb-bulk-series-title { font-size: 20px; font-weight: 700; color: #2c3e50; margin: 0; } .gb-bulk-card-types-list { display: grid; gap: 15px; } .gb-bulk-column-headers { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 15px; padding: 0 15px 8px 15px; margin-bottom: 4px; } .gb-bulk-col-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; } .gb-bulk-col-label.gb-col-qty { text-align: center; } .gb-bulk-col-label.gb-col-price { text-align: right; } .gb-bulk-card-type-row { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 15px; align-items: center; background: white; padding: 15px; border-radius: 12px; border: 2px solid #e0e0e0; transition: all 0.3s ease; } .gb-bulk-card-type-row:hover { border-color: #667eea; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1); } .gb-bulk-type-name { font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 10px; } .gb-bulk-type-image { width: 50px; height: 70px; object-fit: contain; border-radius: 6px; background: #f8f9fa; } .gb-bulk-quantity-input { padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; text-align: center; font-weight: 600; } .gb-bulk-quantity-input:focus { outline: none; border-color: #667eea; } .gb-bulk-type-price { text-align: right; font-size: 18px; font-weight: 700; color: #27ae60; } .gb-wizard-actions { display: flex; justify-content: space-between; gap: 15px; margin-top: 40px; padding-top: 30px; border-top: 2px solid #f0f0f0; } .gb-wizard-back { background: #95a5a6; } .gb-wizard-back:hover { background: #7f8c8d; } .gb-wizard-next:disabled, .gb-wizard-finish:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 768px) { .gb-bulk-wizard { padding: 25px 20px; } .gb-series-count-options { grid-template-columns: 1fr; } .gb-series-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; } .gb-bulk-card-type-row { grid-template-columns: 1fr; gap: 10px; } .gb-bulk-column-headers { display: none; } .gb-bulk-type-price { text-align: left; } .gb-wizard-actions { flex-direction: column; } } .gb-wizard-total-box { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); color: white; padding: 25px; border-radius: 16px; text-align: center; margin-top: 30px; box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3); } .gb-wizard-total-label { font-size: 14px; opacity: 0.9; margin-bottom: 10px; } .gb-wizard-total-value { font-size: 36px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .gb-bulk-mode-toggle { display: flex; gap: 15px; margin-bottom: 30px; justify-content: center; } .gb-mode-btn { padding: 15px 30px; border: 3px solid #e0e0e0; background: white; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .gb-mode-btn:hover { border-color: #667eea; transform: translateY(-2px); } .gb-mode-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: #667eea; color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .gb-bulk-mode { display: none; } .gb-bulk-mode.active { display: block; } .gb-logged-in-notice { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; color: #166534; padding: 10px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; border: 1px solid #bbf7d0; } .gb-logged-in-icon { width: 20px; height: 20px; background: #22c55e; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .gb-login-required { text-align: center; padding: 50px 30px; background: #f8fafc; border-radius: 12px; border: 2px dashed #cbd5e1; } .gb-login-required-icon { font-size: 40px; margin-bottom: 12px; } .gb-login-required h4 { font-size: 18px; color: #1e293b; margin: 0 0 8px 0; } .gb-login-required p { font-size: 14px; color: #64748b; margin: 0 0 24px 0; max-width: 420px; margin-left: auto; margin-right: auto; } .gb-login-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .gb-btn-login { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white !important; padding: 12px 32px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .gb-btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); color: white !important; } .gb-btn-register { background: white; color: #667eea !important; padding: 12px 32px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; border: 2px solid #667eea; transition: all 0.3s ease; } .gb-btn-register:hover { background: #f5f3ff; transform: translateY(-2px); color: #667eea !important; } .gb-btn-disabled { opacity: 0.5; cursor: not-allowed !important; background: #94a3b8 !important; } /* ======================================== WooCommerce My Account - Bulk Başvurularım ======================================== */ .gb-my-submissions { max-width: 100%; } .gb-my-empty { text-align: center; padding: 60px 20px; background: #f8fafc; border-radius: 12px; border: 2px dashed #e2e8f0; } .gb-my-empty-icon { font-size: 48px; margin-bottom: 12px; } .gb-my-empty h3 { font-size: 18px; color: #334155; margin: 0 0 8px; } .gb-my-empty p { font-size: 14px; color: #64748b; margin: 0 0 20px; } .gb-my-btn-primary { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff !important; border-radius: 10px; font-weight: 600; text-decoration: none; transition: all 0.3s; } .gb-my-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102,126,234,.4); color: #fff !important; } .gb-my-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .gb-my-header h3 { margin: 0; font-size: 20px; color: #1e293b; } .gb-my-btn-new { display: inline-block; padding: 8px 18px; background: #667eea; color: #fff !important; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s; } .gb-my-btn-new:hover { background: #5a6fd6; color: #fff !important; } .gb-my-card { display: block; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; text-decoration: none !important; color: inherit !important; transition: all 0.2s; } .gb-my-card:hover { border-color: #667eea; box-shadow: 0 4px 12px rgba(102,126,234,.1); transform: translateY(-1px); } .gb-my-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .gb-my-card-number { font-weight: 700; font-size: 14px; color: #374151; font-family: monospace; } .gb-my-card-status { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .gb-my-card-body { display: flex; justify-content: space-between; align-items: center; } .gb-my-card-info { display: flex; flex-direction: column; gap: 2px; } .gb-my-card-date, .gb-my-card-payment { font-size: 13px; color: #6b7280; } .gb-my-card-amount { font-size: 18px; font-weight: 700; color: #27ae60; } .gb-my-back { display: inline-block; margin-bottom: 20px; color: #667eea !important; text-decoration: none; font-weight: 600; font-size: 14px; } .gb-my-back:hover { text-decoration: underline; } .gb-my-status-banner { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 12px; margin-bottom: 20px; } .gb-my-status-icon { font-size: 28px; } .gb-my-status-label { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; } .gb-my-status-value { font-size: 18px; font-weight: 700; } .gb-my-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .gb-my-summary-item { background: #f8fafc; padding: 14px 16px; border-radius: 10px; border: 1px solid #e5e7eb; } .gb-my-summary-label { display: block; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .gb-my-summary-value { font-size: 15px; font-weight: 600; color: #1e293b; } .gb-my-summary-value.gb-my-amount { color: #27ae60; } .gb-my-admin-note { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 14px; } .gb-my-admin-note p { margin: 6px 0 0; color: #92400e; } .gb-my-section { margin-bottom: 24px; } .gb-my-section h4 { font-size: 16px; color: #374151; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; } .gb-my-items { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; } .gb-my-items-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; } .gb-my-col-img { width: 40px; flex-shrink: 0; } .gb-my-col-name { flex: 1; } .gb-my-col-qty { width: 80px; text-align: center; flex-shrink: 0; } .gb-my-col-price { width: 90px; text-align: right; flex-shrink: 0; } .gb-my-items-header-specific .gb-my-col-qty { display: none; } .gb-my-item-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; } .gb-my-item-row:last-child { border-bottom: none; } .gb-my-item-img { width: 40px; height: 56px; object-fit: contain; border-radius: 4px; background: #f9fafb; flex-shrink: 0; } .gb-my-item-info { flex: 1; min-width: 0; } .gb-my-item-name { display: block; font-weight: 600; font-size: 14px; color: #1e293b; } .gb-my-item-detail { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; } .gb-my-item-series { display: block; font-size: 12px; color: #9ca3af; } .gb-my-item-qty { font-weight: 700; color: #6b7280; font-size: 14px; flex-shrink: 0; } .gb-my-item-price { font-weight: 700; color: #27ae60; font-size: 14px; flex-shrink: 0; text-align: right; min-width: 90px; } .gb-my-item-subtotal { display: flex; justify-content: space-between; padding: 12px 16px; background: #f8fafc; font-size: 14px; color: #374151; } .gb-my-price-breakdown { background: #f8fafc; border-radius: 10px; border: 1px solid #e5e7eb; overflow: hidden; } .gb-my-price-row { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 14px; color: #6b7280; border-bottom: 1px solid #e5e7eb; } .gb-my-price-row:last-child { border-bottom: none; } .gb-my-price-row.gb-my-bonus { color: #22c55e; } .gb-my-price-row.gb-my-total { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 16px; } .gb-my-price-row.gb-my-total strong { font-size: 18px; } @media (max-width: 600px) { .gb-my-summary { grid-template-columns: 1fr 1fr; } .gb-my-card-body { flex-direction: column; align-items: flex-start; gap: 8px; } .gb-my-card-amount { align-self: flex-end; } } .gb-unsorted-form { margin-top: 20px; } .gb-unsorted-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .gb-unsorted-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; } .gb-unsorted-field input { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px; transition: border-color 0.2s; } .gb-unsorted-field input:focus { border-color: #667eea; outline: none; } .gb-required { color: #e74c3c; } .gb-unsorted-section { margin-bottom: 24px; } .gb-unsorted-section-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .gb-unsorted-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .gb-unsorted-checkbox { cursor: pointer; } .gb-unsorted-checkbox input { display: none; } .gb-checkbox-card { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; transition: all 0.2s; background: #fff; } .gb-checkbox-card:hover { border-color: #667eea; background: #f8f9ff; } .gb-unsorted-checkbox input:checked + .gb-checkbox-card { border-color: #667eea; background: #eef0ff; box-shadow: 0 0 0 1px #667eea; } .gb-checkbox-icon { font-size: 20px; flex-shrink: 0; } .gb-checkbox-text { font-size: 13px; font-weight: 600; color: #374151; } .gb-upload-dropzone { border: 2px dashed #d1d5db; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafbfc; } .gb-upload-dropzone:hover, .gb-upload-dropzone.dragover { border-color: #667eea; background: #f0f2ff; } .gb-upload-icon { font-size: 40px; margin-bottom: 8px; } .gb-upload-dropzone p { margin: 4px 0; color: #6b7280; font-size: 14px; } .gb-upload-previews { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .gb-upload-preview-item { position: relative; width: 100px; height: 100px; border-radius: 10px; overflow: hidden; border: 2px solid #e5e7eb; } .gb-upload-preview-item img { width: 100%; height: 100%; object-fit: cover; } .gb-upload-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gb-upload-name { display: none; } #gb-unsorted-notes { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; resize: vertical; } #gb-unsorted-notes:focus { border-color: #667eea; outline: none; } @media (max-width: 600px) { .gb-unsorted-row { grid-template-columns: 1fr; } .gb-unsorted-checkboxes { grid-template-columns: 1fr 1fr; } }